Wybierz wszystkie elementy potomne oprócz pierwszego

83

Powiedz, że mam:

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

Jak wybrałbym wszystkie elementy podrzędne po pierwszym z użyciem jQuery? Mogę więc osiągnąć coś takiego:

<ul>
 <li>First item</li>
 <li class="something">Second item</li>
 <li class="something">Third item</li>
</ul>
Chris Canal
źródło

Odpowiedzi:

36

Opierając się na mojej całkowicie nienaukowej analizie czterech przedstawionych tu metod, wygląda na to, że nie ma między nimi dużej różnicy prędkości. Uruchomiłem każdą na stronie zawierającej serię nieuporządkowanych list o różnej długości i ustawiłem je w czasie za pomocą profilera Firebug.

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

Średni czas: 5,322 ms

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

Średni czas: 5,590 ms

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

Średni czas: 6,084 ms

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

Średni czas: 7,831 ms

twernt
źródło
3
Natknąłem się na to pytanie, ponieważ potrzebowałem wszystkich dzieci oprócz pierwszego. Robiłem to na wszystkich h3, które były w div. Uruchomiłem trzy zapytania, takie jak ty powyżej na mojej stronie i wyszedłem z: not (: first-child) jako najszybsze 2-3 razy. Myślę, że struktura Twojej strony może mieć również wpływ na szybkość profilu. Tak czy inaczej, ta odpowiedź nauczyła mnie, jak używać profilera Firebug i dziękuję za to.
RedWolves
13

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

$("li").slice(1).addClass("something");
Jonny Buchanan
źródło
To dobra odpowiedź, ale czuję, że to, co wybrałem, jest bardziej wyraźnym użyciem. Każdy nowy w projekcie będzie miał szybsze pojęcie o tym, co jest robione w selektorze.
Chris Canal
9

Bardziej eleganckie zapytanie (zaznacz wszystkie elementy li, które są poprzedzone elementem li):

$('ul li+li')

Sergey Ilinsky
źródło
1
$ ("li + li") prawdopodobnie będzie działać szybciej niż $ ("li: not (: first-child)")
Sergey Ilinsky,
3

użyłbym

$("li:gt(0)").addClass("something");
ignu
źródło
2

To powinno działać

$('ul :not(:first-child)').addClass('something');
Poklepać
źródło
1

Nad tym pracuję do tej pory

$('.certificateList input:checkbox:gt(0)')
Chris Canal
źródło
0

Użyj metody jQuery .not ()

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

LUB

var firstElement = $('li').first();
$('li').not(firstElement).addClass('something');
aalov
źródło