单击时隐藏子元素

Question

我试图在单击“ thead”时隐藏“ arrow_o”，但是它不起作用。 jQuery“子级”在表中不起作用吗？

html

<thead class="thead">
  <tr>
    <th>
      <div class="arrow_o"></div>
    </th>
  </tr>
</thead>

js

$(document).ready(function() {
  $('.thead').click(function() {
    $(this).children('.arrow_o').hide();
  });
});

Answer 1

.children（）方法与.find（）的不同之处在于，.children（）仅沿DOM树向下移动一个级别，而.find（）可以向下遍历多个级别以选择后代元素（孙子等）。

所以这：

$(document).ready(function() {
  $('.thead').click(function() {
    $(this).find('.arrow_o').hide();
  });
});

Answer 2

尝试$('.arrow_o', this).hide(); 这基本上设置了应该放置arrow_o的上下文。

完整代码：

$(document).ready(function() {
  $('.thead').click(function() {
     $('.arrow_o', this).hide();
  });
});

Answer 3

.children（）方法与.find（）的不同之处在于，.children（）仅沿DOM树向下移动一个级别，而.find（）可以向下遍历多个级别以选择后代元素（孙子等）。

jQuery儿童

使用.find（）代替。