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

Question

我在一个 div 中有 3 个 span 元素。整个 div 将在循环内动态创建。这是代码

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

现在，当我单击 (".refugeeInfo") div 时，我需要显示名称、unID 和 rmsID 的值。我试过了

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

但结果只显示名称。 unID和rmsID为空。

Answer 1

使用 find() 而不是 children() 问题是您的 .unid 和 .rmsid 是嵌套的在 label 标签内。选择器 children() 仅适用于父级的直接后代。这里这两个元素不是直系后代。

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