Як вибрати ВСІ дочірні (на будь-якому рівні) з батьків у jQuery?


75

Я маю .unbind()всі елементи з батьківського вузла.

Як я можу вибрати всіх дітей (на будь-якому рівні) від батьків?

Спробував:

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

але це працює лише для першого дитячого рівня ...

Тут є тест-кейс


У вас є тестовий приклад, який це демонструє?
одинокий день

2
Чи не можете просто зробити $ ('# google_translate_element'). Find ('*'). Unbind ('click');
rickyduck

Відповіді:


140

Використовуйте jQuery.find (), щоб знайти дітей глибиною більше одного рівня .

Методи .find () та .children () подібні, за винятком того, що останній проходить лише один рівень вниз по дереву DOM.

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

Вам потрібно '*'в find():

На відміну від решти методів обходу дерева, вираз селектора необхідний у виклику .find (). Якщо нам потрібно отримати всі нащадні елементи, ми можемо передати універсальний селектор '*' для цього.


я використовую це зараз, але чи потрібно мені турбуватися про продуктивність?
ProblemsOfSumit

3
Так, звичайно. Ви завжди повинні турбуватися про продуктивність. Сучасні браузери виконуватимуться досить швидко, але якщо у вас виникають проблеми з цим конкретним фрагментом, спробуйте залишити батьківський елемент малим (не надто багато дочірніх) або згрупуйте дітей у менші набори.
Конерак

20

Я думаю, ти міг би зробити:

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

але це спричинило б багато накладних витрат


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/

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.