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

javascript jquery html dom markzzz
quelle
Haben Sie einen Testfall, der dies demonstriert?
einsamer
2
Kannst du nicht einfach $ ('# google_translate_element'). Find ('*'). Unbind ('click');
Rickyduck

Antworten:

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