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?
jQuery(document).ready(...)
?Antworten:
Wenn Sie einen Selektor auf den Kontext anwenden möchten, der von einem vorhandenen jQuery-Set bereitgestellt wird, versuchen Sie die Funktion find () :
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 ...):
quelle
find()
durchsucht alle Nachkommen und:first-child
kann ein Element pro Elternteil zuordnen. Daher kann diese Abfrage wahrscheinlich mehrere Elemente zurückgeben. Oder irre ich mich?element.children(":first-child")
oderelement.children().first();
Verwenden Sie die
children
Funktion mit dem:first
Wähler das bekommen einzelnes erste Kindelement
:quelle
TypeError: Object [object HTMLAnchorElement] has no method 'toggleClass'
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:
$(":first-child", notif)
- 4.304 Operationen / Sek. - am schnellstennotif.children(":first")
- 653 Ops / Sek. - 85% langsamernotif.children()[0]
- 1.416 Operationen / Sek. - 67% langsamerEinheimische Wege:
ele.firstChild
- 4.934.323 ops / s (alle oben genannten Ansätze sind 100% langsamer alsfirstChild
)notif[0].firstChild
- 4.913.658 Operationen / SekDaher 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)
verwendenele.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
quelle
firstChild
werden nicht die gleichen Ergebnisse wie bei jQuery-children()
oder Selektorabfragen erzielt .firstChild
enthält Textknoten, was selten erwünscht ist. Diecontents()
Funktion von jQuery wird sie einschließen, aberchildren()
nicht. Neuere Browser unterstützenfirstElementChild
das erste untergeordnete Element, IE <9 unterstützt es jedoch nicht. Wenn Sie also verwendenfirstChild
, müssen Sie das erste untergeordnete Nicht-Textknoten manuell finden.$(":first-child", notif)
sollte$(":first", notif)
für erwartetes Verhalten sein. Ersteres gibt alle Nachkommen des ersten untergeordneten Elements zurück.Finde alle Kinder und hol dir die ersten.
quelle
.children(':first')
.Hast du es versucht
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 :)
quelle
element
Enkelkinder hatIch habe gerade ein Plugin geschrieben, das
.firstElementChild
wenn möglich verwendet und bei Bedarf auf die Iteration jedes einzelnen Knotens zurückgreift: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.
quelle
document.body
es noch nicht initialisiert ist. 2) Die Leistung ist nur dann viel besser als bei Alternativen, wenn die Anzahl der untergeordneten Knoten sehr hoch ist. Für nur wenige Kinder (sagen wir weniger als 10)$('>:first-child',context)
ist das etwas schneller. Nur die Anzahl der Kinder beeinflusst die Leistung, nicht die Tiefe.document.body
- ich werde das untersuchen.Sie können DOM verwenden
quelle
Dies kann mit einer einfachen Magie wie dieser geschehen:
Referenz: http://www.snoopcode.com/jquery/jquery-first-child-selector
quelle
Bitte benutze es wie folgt. Gib als erstes einen Klassennamen, um p wie "myp" zu markieren.
Verwenden Sie dann den folgenden Code
quelle
Wenn Sie sofort das erste Kind wollen, brauchen Sie
Wenn Sie ein bestimmtes erstes Element im Dom von Ihrem Element möchten, verwenden Sie unten
Probieren Sie es aus: http://jsfiddle.net/vgGbc/2/
quelle
element
es sich um einen DOM-Knoten$(element).first()
handelt, entspricht dies$(element)
nicht seinem ersten untergeordneten Knoten .