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

Question

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

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

尝试过：

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

但它仅适用于第一个儿童级别...

这里有一个测试用例

Answer 1

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

.find() 和 .children() 方法类似，除了
后者仅在 DOM 树中向下移动一层。

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

您需要 find() 中的 '*'：

与其他树遍历方法不同，选择器
调用 .find() 时需要表达式。如果我们需要检索
所有的后代元素，我们可以传入通用选择器
'*' 来完成此操作。

Answer 2

我认为你可以这样做：

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

但这会导致很多开销

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/