jQuery erstes Kind von "this"

Question

Ich versuche, "this" von einem angeklickten Bereich an eine jQuery-Funktion zu übergeben, die dann jQuery auf das erste Kind des angeklickten Elements ausführen kann. Kann nicht scheinen, um es richtig zu bekommen...

<p onclick="toggleSection($(this));"><span class="redClass"></span></p>

Javascript:

function toggleSection(element) {
  element.toggleClass("redClass");
}

Wie referenziere ich das :first-child eines Elements?

Answer 1

Wenn Sie einen Selektor auf den Kontext eines bestehenden jQuery-Sets anwenden wollen, versuchen Sie die find()-Funktion :

element.find(">:first-child").toggleClass("redClass");

Jørn Schou-Rode merkte an, dass man wahrscheinlich nur den ersten direkter Nachkomme des Kontextelements, also der untergeordnete Selektor (>). Er weist auch darauf hin dass Sie genauso gut die Option Kinder()-Funktion die der Funktion find() sehr ähnlich ist, aber nur eine Ebene tief in der Hierarchie sucht (was alles ist, was man braucht...):

element.children(":first").toggleClass("redClass");

Answer 2

Verwenden Sie die children Funktion mit dem :first Selektor um die einzeln erstes Kind von element :

element.children(":first").toggleClass("redClass");

Answer 3

Ich habe hinzugefügt jsperf Test, um den Geschwindigkeitsunterschied zwischen den verschiedenen Ansätzen zur Ermittlung des ersten Kindes zu ermitteln (insgesamt 1000+ Kinder)

gegeben, notif = $('#foo')

jQuery-Wege:

1. $(":first-child", notif) - 4.304 ops/sec - am schnellsten
2. notif.children(":first") - 653 ops/sec - 85% langsamer
3. notif.children()[0] - 1.416 Ops/Sek. - 67 % langsamer

Einheimische Wege:

4. JavaScript nativ' ele.firstChild - 4,934,323 ops/sec (alle oben genannten Ansätze sind 100 % langsamer im Vergleich zu firstChild )
5. Natives DOM ele von jQery: notif[0].firstChild - 4,913,658 Ops/Sek.

Also, erste 3 jQuery Ansätze sind nicht zu empfehlen, zumindest für first-child (ich bezweifle, dass der Fall mit vielen anderen auch sein würde). Wenn Sie ein jQuery-Objekt haben und das erste Kind abrufen müssen, dann das native DOM-Element erhalten aus dem jQuery-Objekt, mit Array-Referenz [0] (empfohlen) ou .get(0) und verwenden Sie die ele.firstChild . Dies führt zu denselben Ergebnissen wie die Verwendung von JavaScript.

alle Tests wurden mit Chrome Canary Build v15.0.854.0 durchgeführt

Answer 4

element.children().first();

Finde alle Kinder und nimm das erste von ihnen.

Answer 5

Können Sie DOM verwenden

$(this).children().first()
// is equivalent to
$(this.firstChild)