时间戳

首页 > 解决方案 > 如何在 jQuery 中显示子元素的内容？

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

问题描述

我想显示/控制$(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 为“thumb-2”的 div 时，它将控制台显示为“更多信息”
  2. 当我单击带有“thumb-3”的 div id 时，它将控制台显示为“Atlast”

标签： jquery

解决方案

您没有将父控件传递给 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>

推荐阅读