Wie bekomme ich Wert von inneren HTML-Objekte eines div

Question

Ich habe 3 Span-Elemente in einem Div. Das gesamte div wird dynamisch innerhalb einer Schleife erstellt. hier ist der Code

$.each(data.Payload, function(index, value){ 
     stmt+='<li class="list-group-item">'+ 
       '<div class="col-xs-12 col-sm-9">'+ 
        '<div class="refugeeInfo">'+ 
         '<span class="name" style="cursor: pointer">'+ value.firstName +' '+value.lastName+'</span><br/>'+ 
         '<label><strong>unID: </strong><span class="unid" style="cursor: pointer;"> '+ value.unID +'</span></label>'+ 
         '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'+ 
         '<label><strong>rmsID: </strong><span class="rmsid" style="cursor: pointer">'+ value.rmsID +'</span></label><br/>'+ 
         '</div>'+ 
       '</li>' 
     }); 

jetzt, wenn ich div i den Wert des Namens, UnID und rmsID zeigen, müssen Sie auf (".refugeeInfo"). wjat Ich versuchte

$('.refugeeInfo').click(function(){ 
      var name=$(this).children('.name').text(); 
      var unID=$(this).children('.unid').text(); 
      var rmsID=$(this).children('.rmsid').text(); 
      console.log("name: "+name); 
      console.log("unID: "+unID); 
      console.log("rmsID: "+rmsID); 
}) 

aber das Ergebnis, das nur Name zeigt. unID und rmsID ist frei.

Answer 1

Verwenden find() statt children() Problem ist Ihre .unid und .rmsid sind in einem label Tag .. die Auswahl children() Werke nur für direkte Nachkommen der Eltern verschachtelt. Hier sind diese 2 Elemente keine direkten Nachkommen.

From the document.

Die .children() Methode von .find nur dadurch unterscheidet,() in diesem .children(), um eine einzige Ebene auf der DOM-Baum fährt, während .find() kann mehrere Stufen durchlaufen bis in untergeordneten Elemente (Enkel zu wählen, usw.).

$('.refugeeInfo').click(function(){ 
    var name = $(this).children('.name').text(); 
    var unID = $(this).find('.unid').text(); 
    var rmsID = $(this).find('.rmsid').text(); 

    console.log("name: " + name); 
    console.log("unID: " + unID); 
    console.log("rmsID: " + rmsID); 
}); 

Answer 2

Verwendung find()

$('.refugeeInfo').click(function(){ 
      var name=$(this).children('.name').text(); 
      var unID=$(this).find('.unid').text(); 
      var rmsID=$(this).find('.rmsid').text(); 
      console.log("name: "+name); 
      console.log("unID: "+unID); 
      console.log("rmsID: "+rmsID); 
})