如何获取div的内部html对象的值

Question

i have 3 span elements inside a div. the whole div will be created dynamically inside a loop. here is the 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>'
        });

now when i click on (".refugeeInfo") div i need to show the value of name, unID and rmsID. wjat I tried

$('.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);
})

but the result showing only name. unID and rmsID is vacant.

Answer 1

Use find() instead of children() Problem is your .unid and .rmsid are nested inside a label tag.. the selector children() works only for direct descendants of the parent. Here these 2 elements are not direct descendants.

From the document .

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

$('.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

use 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);
})