点击

Question

毫无疑问，这是一个基本的jQuery问题，但我有一个像这样的HTML div集群：

<div class="sunti_contain" ng-repeat="sunti in suntis track by $index">
                <div class="individual_sunti">
                    <!--needs a unique div#id via angularz-->
                    <div class="sunti_content">{{sunti.content || 'content loading...'}}</div>
                    <div class="sunti_tags">{{sunti.tags || 'tags'}}</div>
                    <div class="sunti_author">{{sunti.author || 'author-placeholder'}}</div>
                    <div class="sunti_shortid">{{sunti.shortid}}</div>
                </div>
            </div>

（{{}}是角度填充，但它们对此问题无关紧要）

在父元素 .individual_sunti 上的click事件中，我想将子元素 sunti_shortid 值写出到控制台。

到目前为止，我有：

$('.individual_sunti').click(function() {
        console.log('caught a click on ' + $(this));
}

但是我不知道要添加到$（this）的内容来引用名为 .sunti_shortid 的子元素

像“

”那样的东西

    console.log('caught a click on ' + $(this > '.sunti_shortid'));

不起作用

Answer 1

使用.find()：

$(this).find('div.sunti_shortid');

或.children()：

$(this).children('div.sunti_shortid');

区别在于.children()仅检查（等待它......）子元素（即一级向下），而.find()搜索所有后代。

Answer 2

要获取子元素，请使用find（）方法，使用class或id属性包含需要查找的元素。

$('.individual_sunti').click(function() {
    console.log($(this).find('.sunti_shortid'));
}