it-swarm.com.de

jQuery erstes Kind von "diesem"

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 nicht scheinen, es richtig zu machen ...

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

Javascript:

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

Wie beziehe ich mich auf das: first-child of element?

300
macca1

Wenn Sie einen Selektor auf den Kontext anwenden möchten, der von einem vorhandenen jQuery-Set bereitgestellt wird, versuchen Sie es mit der 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 der untergeordnete Selektor (>). Er weist auch darauf hin dass Sie genauso gut die children () - Funktion verwenden könnten, die find () sehr ähnlich ist, aber nur eine Ebene tief in der Hierarchie durchsucht (welche) ist alles, was du brauchst...):

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

Verwenden Sie die Funktion children mit der Funktion :first selector um das einzelne Kind von element zu bekommen:

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

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

gegeben, notif = $('#foo')

jQuery Möglichkeiten:

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

Native Möglichkeiten:

  1. JavaScript native 'ele.firstChild - 4,934,323 Operationen/Sek. (Alle oben genannten Ansätze sind 100% langsamer als firstChild)
  2. Natives DOM-Element von jQery: notif[0].firstChild - 4,913,658 Operationen/Sek

Die ersten drei jQuery-Ansätze werden daher zumindest für Erstkinder nicht empfohlen (ich bezweifle, dass dies bei vielen anderen auch der Fall wäre). Wenn Sie ein jQuery-Objekt haben und das erste untergeordnete Objekt abrufen müssen, rufen Sie das native DOM-Element mithilfe der Array-Referenz [0] (empfohlen) oder .get(0) und benutze den ele.firstChild. Dies führt zu den gleichen Ergebnissen wie die normale Verwendung von JavaScript.

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

49
manikanta
element.children().first();

Finde alle Kinder und hol sie dir.

13
Bishal Paudel

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 einschlagen und auf dich werfen wird :)

9
theIV

Ich habe gerade ein Plugin geschrieben, das .firstElementChild und greift, falls erforderlich, auf die Iteration über jeden einzelnen Knoten zurück:

(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 under Chrome 24) war es ein paar Größenordnungen schneller als jede andere jQuery-selector-basierte Methode .

4
Alnitak

sie können DOM verwenden

$(this).children().first()
// is equivalent to
$(this.firstChild)
2
Yukulélé

Dies kann mit einer einfachen Magie wie der folgenden geschehen:

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

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

2
Prabhakar

benutze es bitte so als erstes gib p einen Klassennamen wie "myp"

verwenden Sie dann den folgenden Code

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