Jak dodać zajęcia do poszczególnych li?

Question

mam to HTML:

<ul class="how-long"> 
    <li value="1">Any</li> 
    <li value="1">1 day</li> 
    <li value="2">Week end</li> 
    <li value="7">1 Week</li> 
    <li value="14">2 Week</li> 
    <li value="21">3 Week</li> 
</ul> 

na dokument gotowy Chcę dodać nową klasę do 4-ej li.

To co próbowałem:

$(".how-long li").slice(3).addClass('change-color'); 

Jeśli mogę umieścić alert jak:

alert($(".how-long li").slice(3).html()); 

daje mi 1 tydzień, który jest w porządku, ale kiedy addClass klasa jest dodawany do wszystkich li po 4 li.

Chcę tego bez dodawania ID do każdego elementu li. Mogę twardo kodu klasy w li element bezpośrednio, ale chcę zrobić to dynamicznie za pomocą jQuery.

Answer 1

Aby zrobić to w jednym selektorem, użyj nth-child lub eq:

nth-child jest znacznie szybciej, zobacz moje jsPerf tutaj: http://jsperf.com/nth-child-vs-eq

nth-child:

$(".how-long li:nth-child(4)").addClass('change-color'); 

eq:

$(".how-long li:eq(3)").addClass('change-color'); 

Podstawową różnicą jest to, że nth-child daje 4. elementem każdy element z tej klasy (niezależnie od tego, czy jest to dziecko z danej pozycji), natomiast eq będzie daj dzieciom bieżący przedmiot.

Answer 2

$(".how-long li").eq(3).addClass('change-color'); 

Answer 3

plaster nie zwraca obiektu jQuery, dlatego nie można użyć metody addClass. Właściwy sposób, aby robić to, co masz zamiar to:

przez index:

$(".how-long li").eq(3).addClass('change-color'); 

poprzez odniesienie wartości:

$(".how-long li[value=7]").addClass('change-color'); 

Answer 4

zrobić w ten sposób

$(".how-long li:nth-child(4)").attr({'class':'test'}); 

To doda klasa test do 4 li

Nadzieja to heps

Answer 5

Jeśli chcesz użyć metody slice trzeba określić atrybut końcową, która brakuje

$(".how-long li").slice(3,4).addClass('change-color'); 

Answer 6

wybiera się 4 ponieważ początek Index Array od 0.

Zawsze możesz użyć $ (". How long li: nth-child (4)");

Więcej informacji tutaj: http://api.jquery.com/nth-child-selector/

Answer 7

Można użyć nth-child selector:

$(".how-long li:nth-child(4)").addClass('change-color'); 

alert($(".how-long li:nth-child(4)").html());