如何在jQuery中从父级中选择所有子级(在任何级别)?

时间:2011-10-04 13:35:38

标签: javascript jquery html dom

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

如何从父母那里选择所有孩子(在任何级别)?

试过:

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

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

Here有一个测试用例

3 个答案:

答案 0 :(得分:128)

使用jQuery.find()查找多个级别深的孩子。

  

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

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

您需要'*'中的find()

  

与其他树遍历方法不同,选择器   在调用.find()时需要表达式。如果我们需要检索   所有的后代元素,我们都可以传入通用选择器   '*'来实现这一目标。

答案 1 :(得分:16)

我认为你可以做到:

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

但这会导致很多开销

答案 2 :(得分: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/