如何从jQuery的父级中选择所有子级（任意级别）？

75

我必须.unbind()来自父节点的所有元素。

如何从父母中选择所有子女（任何级别）？

尝试过：

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

但它仅适用于第一个孩子的水平...

这里有一个测试用例

— 马克兹
source

您有一个测试用例证明了这一点吗？

— lonesomeday

2

你不能只做$（'＃google_translate_element'）。find（'*'）。unbind（'click'）;

— rickyduck 2011年

140

使用jQuery.find（）查找深度超过一层的子级。

.find（）和.children（）方法类似，不同之处在于后者仅沿DOM树向下移动一个级别。

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

您需要'*'在find()：

与其余的树遍历方法不同，在调用.find（）时需要选择器表达式。如果需要检索所有后代元素，则可以传入通用选择器“ *”以完成此操作。

— 科纳拉克
source

我现在正在使用此功能，但是我是否需要担心性能？

— ProblemsSuSumit

3

是的，当然。您应该始终担心性能。现代的浏览器执行起来会很快，但是如果您遇到此特定代码段的问题，请尝试将父元素保持较小（不要有太多子元素）或将子元素分组为较小的集合。

— Konerak 2014年

20

我认为您可以：

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

但这会导致很多开销

— 尼古拉·佩鲁切蒂（Nicola Peluchetti）
source

1

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

我可以确认选择器#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/

— 佐普
source