Wählen Sie alle untergeordneten Elemente außer dem ersten aus

81

Angenommen, ich habe Folgendes:

<ul>
 <li>First item</li>
 <li>Second item</li>
 <li>Third item</li>
</ul>

Wie würde ich mit jQuery alle untergeordneten Elemente nach dem ersten auswählen? So kann ich etwas erreichen wie:

<ul>
 <li>First item</li>
 <li class="something">Second item</li>
 <li class="something">Third item</li>
</ul>
Chris Canal
quelle

Antworten:

136

Sie sollten in der Lage sein, die Selektoren "nicht" und "erstes Kind" zu verwenden.

$("li:not(:first-child)").addClass("something");

http://docs.jquery.com/Selectors/not

http://docs.jquery.com/Selectors/firstChild

twernt
quelle
Ich habe Folgendes versucht: $ ('. CertificateList input: checkbox: not (: first-child)'), aber es hat nicht funktioniert ....
Chris Canal
Ist dies langsamer als die unten aufgeführte Slice-Methode?
Chris Marasti-Georg
36

Basierend auf meiner völlig unwissenschaftlichen Analyse der vier Methoden hier sieht es so aus, als gäbe es keinen großen Geschwindigkeitsunterschied zwischen ihnen. Ich habe jede Seite auf einer Seite mit einer Reihe ungeordneter Listen unterschiedlicher Länge ausgeführt und sie mit dem Firebug-Profiler zeitlich festgelegt.

$("li").slice(1).addClass("something");

Durchschnittliche Zeit: 5,322 ms

$("li:gt(0)").addClass("something");

Durchschnittliche Zeit: 5,590 ms

$("li:not(:first-child)").addClass("something");

Durchschnittliche Zeit: 6,084 ms

$("ul li+li").addClass("something");

Durchschnittliche Zeit: 7,831 ms

twernt
quelle
3
Ich bin auf diese Frage gestoßen, weil ich alle Kinder außer dem ersten bekommen musste. Ich habe das auf allen h3 gemacht, die in einem Div waren. Ich habe drei der Abfragen ausgeführt, die Sie oben auf meiner Seite hatten, und habe festgestellt, dass: nicht (: erstes Kind) 2-3 Mal die schnellste ist. Ich denke, die Art und Weise, wie Ihre Seite strukturiert ist, kann sich auch auf die Profilgeschwindigkeit auswirken. In beiden Fällen hat mir diese Antwort den Umgang mit dem Firebug-Profiler beigebracht, und ich danke Ihnen dafür.
RedWolves
13

http://docs.jquery.com/Traversing/slice

$("li").slice(1).addClass("something");
Jonny Buchanan
quelle
Dies ist eine nette Antwort, aber ich denke, was ich als Antwort ausgewählt habe, ist die explizitere Verwendung. Jeder, der neu im Projekt ist, kann schneller verstehen, was im Selektor getan wird.
Chris Canal
9

Eine elegantere Abfrage (wählen Sie alle li-Elemente aus, denen ein li-Element vorangestellt ist):

$('ul li+li')

Sergey Ilinsky
quelle
1
$ ("li + li") wird wahrscheinlich schneller arbeiten als $ ("li: not (: erstes Kind)")
Sergey Ilinsky
3

Ich würde verwenden

$("li:gt(0)").addClass("something");
ignu
quelle
2

Das sollte funktionieren

$('ul :not(:first-child)').addClass('something');
Klopfen
quelle
1

Das ist es, woran ich bisher gearbeitet habe

$('.certificateList input:checkbox:gt(0)')
Chris Canal
quelle
0

Verwenden Sie die Methode jQuery .not ()

$('li').not(':first').addClass('something');

ODER

var firstElement = $('li').first();
$('li').not(firstElement).addClass('something');
aalov
quelle