jQuery erstes Kind von "this"

Ich versuche, "dies" von einem angeklickten Bereich an eine jQuery-Funktion zu übergeben, die dann jQuery für das erste untergeordnete Element des angeklickten Elements ausführen kann. Kann es nicht richtig machen ...

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

Javascript:

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

Wie verweise ich auf das: erste Kind des Elements?

Wenn Sie einen Selektor auf den Kontext anwenden möchten, der von einem vorhandenen jQuery-Set bereitgestellt wird, versuchen Sie die Funktion find () :

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

Jørn Schou-Rode bemerkte, dass Sie wahrscheinlich nur den ersten direkten Nachkommen des Kontextelements finden möchten , daher den untergeordneten Selektor (>). Er weist auch darauf hin, dass Sie genauso gut die Funktion children () verwenden könnten , die find () sehr ähnlich ist, aber nur eine Ebene tief in der Hierarchie durchsucht (was alles ist, was Sie brauchen ...):

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

Verwenden Sie die childrenFunktion mit dem :firstWähler das bekommen einzelnes erste Kind element:

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

Ich habe jsperf hinzugefügt Test , um den Geschwindigkeitsunterschied für verschiedene Ansätze zu ermitteln, um das erste Kind zu bekommen (insgesamt 1000+ Kinder).

gegeben, notif = $('#foo')

jQuery-Möglichkeiten:

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

Einheimische Wege:

4. JavaScript native ' ele.firstChild- 4.934.323 ops / s (alle oben genannten Ansätze sind 100% langsamer alsfirstChild )
5. Native DOM ele von jQery: notif[0].firstChild- 4.913.658 Operationen / Sek

Daher werden die ersten drei jQuery-Ansätze zumindest für das erste Kind nicht empfohlen (ich bezweifle, dass dies auch bei vielen anderen der Fall ist). Wenn Sie ein jQuery-Objekt haben und das erste untergeordnete Objekt abrufen müssen, rufen Sie das native DOM-Element aus dem jQuery-Objekt ab, indem Sie die Array-Referenz [0] (empfohlen) oder .get(0)verwenden ele.firstChild. Dies führt zu denselben identischen Ergebnissen wie die normale Verwendung von JavaScript.

Alle Tests werden in Chrome Canary Build v15.0.854.0 durchgeführt

element.children().first();

Finde alle Kinder und hol dir die ersten.

Hast du es versucht

$(":first-child", element).toggleClass("redClass");

Ich denke, Sie möchten Ihr Element als Kontext für Ihre Suche festlegen. Es könnte einen besseren Weg geben, dies zu tun, den ein anderer jQuery-Guru hier einspringen und auf dich werfen wird :)

Ich habe gerade ein Plugin geschrieben, das .firstElementChildwenn möglich verwendet und bei Bedarf auf die Iteration jedes einzelnen Knotens zurückgreift:

(function ($) {
    var useElementChild = ('firstElementChild' in document.createElement('div'));

    $.fn.firstChild = function () {
        return this.map(function() {
            if (useElementChild) {
                return this.firstElementChild;
            } else {
                var node = this.firstChild;
                while (node) {
                    if (node.type === 1) {
                        break;
                    }
                    node = node.nextSibling;
                }
                return node;
            }
        });
    };
})(jQuery);

Es ist nicht so schnell wie eine reine DOM-Lösung, aber in jsperf-Tests unter Chrome 24 war es einige Größenordnungen schneller als jede andere auf jQuery-Selektoren basierende Methode.

Sie können DOM verwenden

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

Dies kann mit einer einfachen Magie wie dieser geschehen:

$(":first-child", element).toggleClass("redClass");

Referenz: http://www.snoopcode.com/jquery/jquery-first-child-selector

Bitte benutze es wie folgt. Gib als erstes einen Klassennamen, um p wie "myp" zu markieren.

Verwenden Sie dann den folgenden Code

$(document).ready(function() {
    $(".myp").click(function() {
        $(this).children(":first").toggleClass("classname"); // this will access the span.
    })
})

Wenn Sie sofort das erste Kind wollen, brauchen Sie

    $(element).first();

Wenn Sie ein bestimmtes erstes Element im Dom von Ihrem Element möchten, verwenden Sie unten

    var spanElement = $(elementId).find(".redClass :first");
    $(spanElement).addClass("yourClassHere");

Probieren Sie es aus: http://jsfiddle.net/vgGbc/2/