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

Comments

Popular posts from this blog

javascript - Hide toolbar of pdf file opened inside iframe using firefox -

Ansible - ERROR! the field 'hosts' is required but was not set -

Copy range with conditional formatting -