sova sova - 4 months ago 22
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">{{ || 'author-placeholder'}}</div>
<div class="sunti_shortid">{{sunti.shortid}}</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


Use .find():


or .children():


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