如何在jQuery中选择父元素下的所有子元素（无论层级）？

Question

我需要使用 .unbind() 来解除所有父节点中的元素绑定。

如何选择一个父节点下的所有子节点（无论层级）？

已尝试：

$('#google_translate_element *').unbind('click');

但它仅适用于第一级子元素... 这里有一个测试案例。

- markzzz

---

你有展示这个的测试用例吗？ - lonesomeday

你能不能只是执行$('#google_translate_element').find('*').unbind('click');？ - rickyduck

Answer 1

使用jQuery.find()来查找超过一级深度的子元素。

.find()和.children()方法类似，不同之处在于后者只会遍历DOM树中的一层。

$('#google_translate_element').find('*').unbind('click');

在find()中需要使用通用选择器'*'：

与其他树遍历方法不同，调用find()时必须提供选择器表达式。如果我们需要检索所有后代元素，则可以传递通用选择器'*'来完成这个任务。

- Konerak

---

我现在正在使用这个，但是我需要担心性能吗？ - ProblemsOfSumit

当然。您应该始终关注性能。现代浏览器执行速度相当快，但如果在特定代码片段中遇到问题，请尝试使父元素较小（不要有太多子元素）或将子元素分组成较小的集合。 - Konerak

Answer 2

我认为你可以这样做：

$('#google_translate_element').find('*').each(function(){
    $(this).unbind('click');
});

但这将会导致很多额外的开销

- Nicola Peluchetti

Answer 3

看起来原始的测试用例是错误的。

我可以确认选择器#my_parent_element *与unbind()一起使用是有效的。

让我们以以下HTML为例：

<div id="#my_parent_element">
  <div class="div1">
    <div class="div2">hello</div>
    <div class="div3">my</div>
  </div>
  <div class="div4">name</div>
  <div class="div5">
    <div class="div6">is</div>
    <div class="div7">
      <div class="div8">marco</div>
      <div class="div9">(try and click on any word)!</div>
    </div>
  </div>
</div>
<button class="unbind">Now, click me and try again</button>

还有 jQuery 部分：

$('.div1,.div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9').click(function() {
  alert('hi!');
})
$('button.unbind').click(function() {
  $('#my_parent_element *').unbind('click');
})

你可以在这里尝试：http://jsfiddle.net/fLvwbazk/7/

- Zoup