Wie wähle ich ALLE Kinder (in jeder Ebene) aus einem Elternteil in jQuery aus?

74

Ich muss zu .unbind()allen Elementen von einem übergeordneten Knoten.

Wie kann ich alle Kinder (auf jeder Ebene) eines Elternteils auswählen?

Versucht:

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

aber es funktioniert nur für die ersten Kinderlevel ...

Hier gibt es einen Testfall

— markzzz
quelle

Haben Sie einen Testfall, der dies demonstriert?

— einsamer

2

Kannst du nicht einfach $ ('# google_translate_element'). Find ('*'). Unbind ('click');

— Rickyduck

139

Verwenden Sie jQuery.find () , um Kinder zu finden, die mehr als eine Ebene tief sind.

Die Methoden .find () und .children () sind ähnlich, mit der Ausnahme, dass letztere nur eine einzige Ebene im DOM-Baum durchlaufen.

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

Du brauchst das '*'in find():

Anders als bei den übrigen Baumdurchlaufmethoden ist der Selektorausdruck bei einem Aufruf von .find () erforderlich. Wenn wir alle untergeordneten Elemente abrufen müssen, können wir den universellen Selektor '*' übergeben, um dies zu erreichen.

— Konerak
quelle

Ich benutze das gerade, aber muss ich mir Sorgen um die Leistung machen?

— Probleme von

3

Ja natürlich. Sie sollten sich immer um die Leistung sorgen. Moderne Browser lassen sich relativ schnell ausführen. Wenn Sie jedoch auf Probleme mit diesem bestimmten Snippet stoßen, versuchen Sie, das übergeordnete Element klein zu halten (nicht zu viele untergeordnete Elemente), oder gruppieren Sie die untergeordneten Elemente in kleineren Gruppen.

— Konerak

20

Ich denke du könntest tun:

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

aber es würde viel Overhead verursachen

— Nicola Peluchetti
quelle

1

Es scheint, dass der ursprüngliche Testfall falsch ist.

Ich kann bestätigen, dass der Selektor mit #my_parent_element *funktioniert unbind().

Nehmen wir als Beispiel das folgende 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>

Und das jquery bisschen:

$('.div1,.div2,.div3,.div4,.div5,.div6,.div7,.div8,.div9').click(function() {
  alert('hi!');
})
$('button.unbind').click(function() {
  $('#my_parent_element *').unbind('click');
})

Sie können es hier versuchen: http://jsfiddle.net/fLvwbazk/7/

— Zoup
quelle