如何在jQuery中显示子元素的内容？

Question

我想显示/控制台$(this)的子内容。见下文代码：

<div id="thumb-2" class="thumb">
    <span id="info-2" class="blurb">More Info</span>
</div>

<div id="thumb-3" class="thumb">
    <span id="info-3" class="blurb">Atlast</span>
</div>

<script>
$(document).ready(function(){
   $(this).click(function(){
        console.log($(this).children('.blurb').text());
   });
});
</script>

但它在控制台上什么也没有显示。

产出如下：

1. 当我用id‘拇指-2’点击div时，它会作为‘更多的信息’来安慰。
2. 当我用“拇指-3”单击div id时，它会以“Atlast”的形式进行控制台。

Answer 1

您不能将父控件传递到jQuery。

使用关联的类thumb查找元素的子元素。

​

$(function() {
  $('.thumb').click(function() {
    console.log($(this).children('.blurb').text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumb-2" class="thumb">
  <span id="info-2" class="blurb">More Info</span>
</div>

<div id="thumb-3" class="thumb">
  <span id="info-3" class="blurb">Atlast</span>
</div>

​

Answer 2

​

 $(document).ready(function(){
                       $(this).click(function(e){
                               let target = $(e.target);
                               console.log(target.children('.blurb').text());
                       });
                    });

​

如上面所示，修改您的代码，您将得到所需的输出。在您的示例中，$(this)具有绑定到document object.The子()方法的上下文，返回所选element.The的所有直接子级，只有document的直接子元素是html。html没有设置blurb类。因此，获取undefined.There是另一种名为find()的方法，用于将单击事件绑定到整个文档，从而输出两个.blurb元素的文本内容。如上面我的代码片段所示，您可以捕获click事件的目标。如果它有名为blurb的直接子节点，则获取文本节点。

Answer 3

您可以尝试下面的代码

$(document).on('click', '.thumb', function(){
   var thumb = $(this);
   console.log(thumb.children('.blurb').text())
   //console.log(thumb.find('.blurb').text()) //another way
})