jquery - 如何在 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. When I click div with id 'thumb-2', it will console as 'More Info'
2. When I click div id with 'thumb-3', it will console as '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>