javascript - how to get value of inner html objects of a div -

i have 3 span elements inside div. whole div created dynamically inside loop. here 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 click on (".refugeeinfo") div need show value of name, unid , rmsid. wjat 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 result showing name. unid , rmsid vacant.

use find() instead of children() problem .unid , .rmsid nested inside label tag.. selector children() works direct descendants of parent. here these 2 elements not direct descendants.

from document.

the .children() method differs .find() in .children() travels single level down dom tree while .find() can traverse down multiple levels select descendant elements (grandchildren, etc.) 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); });