Как выбрать ВСЕХ детей (на любом уровне) от родителя в 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/