Anzeige Kind div Attribut auf Klick

Question

Dies ist eine grundlegende Frage jQuery keinen Zweifel, aber ich habe einen HTML-div Cluster wie folgt:

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

(der {{}} sind Winkel Fill-In, aber sie don ‚t für diese Frage Rolle)

auf einem Click-Ereignis für das übergeordnete Element .individual_sunti, möchte ich das Kind-Element schreiben Wert auf die Konsole sunti_shortid.

Bisher habe ich:

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

Aber ich weiß nicht, was zu $ ​​(this) hinzuzufügen, um das Kind-Element zu verweisen genannt .sunti_shortid

Etwas naieve wie

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

funktioniert nicht

Answer 1

Verwenden .find():

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

oder .children():

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

Der Unterschied ist, dass .children() nur Schecks (für sie warten ...) Kinder Elemente (d eine Ebene tiefer), während .find() alle Nachkommen durchsucht.

Answer 2

Um ein untergeordnetes Element abzurufen, verwenden Sie die find() -Methode, die angibt, welches Element Sie mithilfe eines Klassen- oder ID-Attributs finden müssen.

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