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>

但是它在控制台中什么也没显示。

输出将是：

当我单击ID为'thumb-2'的div时，它将作为“更多信息”显示。

当我单击带有“ thumb-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对象的上下文。children（）方法返回所选元素的所有直接子级。document的唯一直接子级是html。 html没有设置blurb类。因此，您变得不确定了。还有另一种方法叫做find（）来解决这个问题。查找选择项的所有嵌套子代的横向元素，但是您将click事件绑定到了整个文档，因此它将输出两个.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
})

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

3 个答案: