sova sova - 2 months ago 8
HTML Question

display child div attribute on click

This is a basic jQuery question no doubt, but I have an HTML div cluster like so:

<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>


(the {{ }} are angular fill-ins, but they don't matter for this question)

On a click event on the parent element .individual_sunti , I want write out the child element sunti_shortid value to the console.

So far I have:

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


But I don't know what to add to $(this) to refer to the child element called .sunti_shortid

Something naieve like

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


does not work

Answer

Use .find():

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

or .children():

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

The difference being that .children() only checks (wait for it...) children elements (i.e. one level down), while .find() searches all descendants.