Wie würde ich das erste auswählen <p> Element im Folgenden <div> mit jQuery?
<div>
<h1>heading</h1>
<p>How do I select this element with jQuery?</p>
<p>Another paragraph</p>
</div>
jQuery zuerst vom Typselektor?
Lesezeit: 3 Minuten
11761700cookie-checkjQuery zuerst vom Typselektor?
James Allardice
Angenommen, Sie haben einen Verweis auf die div schon:
$(yourDiv).find("p").eq(0);
Wenn das erste p wird immer ein direktes Kind von sein divDu könntest benutzen children Anstatt von find.
Einige Alternativen sind:
$(yourDiv).find("p:eq(0)"); //Slower than the `.eq` method
$(yourDiv).find("p:first");
$(yourDiv).find("p").first() //Just an alias for `.eq(0)`
Notiere dass der eq Methode ist immer der schnellste Weg, dies zu tun. Hier sind die Ergebnisse von a schneller vergleich des eq Methode, :eq Wahlschalter und :first Selektor (ich habe mich nicht darum gekümmert first Methode, da es nur ein Alias von ist eq(0)):
-
Schön, das sieht überzeugend aus, danke!
– Webdesigner
16. Dezember 2011 um 7:57 Uhr
-
Kein Problem, freut mich das ich helfen konnte 🙂 Bei Interesse wäre noch eine Alternative
:lt(1). Ich bin mir fast sicher, dass es langsamer sein wird.eqMethode, aber es ist ein weiterer Weg, dasselbe zu erreichen.– James Allardice
16. Dezember 2011 um 8:00 Uhr
-
Wow, das ist ein erheblicher Unterschied. Ich verstehe nicht, warum jQuery :first überhaupt erlauben würde. Im Hintergrund sollte es in :nth-child(1) konvertiert werden. jsperf.com/jq-first-vs-eq/3 Gibt es einen Grund, warum dies nicht getan wird?
– rkw
16. Dezember 2011 um 8:10 Uhr
-
@rkw –
:nth-childmacht etwas ganz anderes. Es gibt das Element am angegebenen Index zurück (1-basiert, nur für zusätzliche Verwirrung!) wenn es mit dem Selektor übereinstimmt. In Ihrem jsperf-Test ist die:nth-childBeispiel wird mit keinem Element übereinstimmen – das erste Element ist einh2keinp. Ich glaube, dass hinter den Kulissen:firstumgewandelt wird:eq(0)was in meinem ursprünglichen Test gezeigt wird.– James Allardice
16. Dezember 2011 um 8:15 Uhr
-
@rkw – Wahrscheinlich erwähnenswert
:first-of-typeund dergleichen wird funktionieren nur in Browsern, die dies unterstützenquerySelectorAll. Ältere Browser (insbesondere IE8 und niedriger) werfen einen Fehler, also bleiben Sie wahrscheinlich am besten dabeieq.– James Allardice
16. Dezember 2011 um 9:44 Uhr
rkw
$('div p:first')
Die Antwort war zu kurz, um sie ohne diesen nutzlosen Satz zu posten.
Bearbeiten
Dies ist definitiv eine langsame Option. Nach einem Blick auf James Geschwindigkeitstest sieht es so aus, als ob jQuery-Selektoren am besten funktionieren, wenn sie von CSS-Selektoren huckepack genommen werden.
-
@JamesAllardice Das ist gleich .First(), weil beide mit einem einzigen Element übereinstimmen. Ob es der gewünschte Effekt ist, hängt von der Herausforderung des Web_Designers ab.
– Colin
16. Dezember 2011 um 7:54 Uhr
-
@Farrell – Ja, es ist gleich
.firstund:firstund:eq(0)und:lt(1)(es gibt so viele Möglichkeiten, dasselbe mit jQuery zu schreiben), aber es sollte die schnellste der Gruppe sein.– James Allardice
16. Dezember 2011 um 7:57 Uhr
-
@rkw – Beachten Sie das
:nth-childist nicht äquivalent und funktioniert in diesem Fall nicht. Sie haben Recht, wenn Sie denken, dass Selektoren am besten funktionieren, wenn sie ein CSS-Äquivalent haben, insbesondere in modernen Browsern, weil die nativequerySelectorundquerySelectorAllMethoden können anstelle von Sizzle verwendet werden.– James Allardice
16. Dezember 2011 um 8:19 Uhr
Colin
$(“div p”).first();
oder $(‘div p:first’);
Bezug: http://api.jquery.com/first/
Denken Sie daran, dass first() nur mit einem einzigen Element übereinstimmt, der Selektor :first-child kann mit mehr als einem übereinstimmen: einem für jedes übergeordnete Element.
Sie kennen die Antwort fast (aus Ihrem Beitragstitel). Es gibt einen Selektor in jQuery namens :first-of-type. Verwenden Sie es, um die Klasse automatisch zu finden und dem ersten p-Tag hinzuzufügen, wie folgt:
$("div p:first-of-type").addClass('someClass');
$('div p').first()
Sollte arbeiten. Ich finde.
Das sollte funktionieren
$( "div p:first-of-type" ).css( "font-size: 10px" );
Der obige Code findet den ersten Absatz im div als @Denver zeigte und änderte ihn fonts-size zu 10px
Hier ist ein Beispiel, das noch mehr erklärt jQuery First-of-Type-Selektor
