jquery - 单击时显示子 div 属性

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 上的单击事件中，我想将子元素 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() 搜索所有后代。