Come aggiungere una classe a particolari li?

Question

Ho questo 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> 

Il documento pronto voglio aggiungere nuova classe al elemento li 4 °.

Questo è quello che ho provato:

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

Se metto un avviso come:

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

mi dà 1 settimana che è giusto, ma quando ho addClass si aggiunge la classe a tutti i li dopo il 4 ° li.

Desidero questo senza aggiungere ID a ciascun elemento li. Posso classificare hard codice direttamente in li, ma voglio farlo dinamicamente usando jQuery.

Answer 1

di farlo in un selettore, utilizzare nth-child o eq:

nth-child è notevolmente più veloce, vedere il mio jsPerf qui: 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'); 

La differenza fondamentale è che nth-child vi darà il 4 ° elemento della ogni elemento con quella classe (indipendentemente dal fatto che si tratta di un figlio della voce corrente), mentre eq sarà darti i bambini sull'attuale oggetto.

Answer 2

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

Answer 3

slice non restituisce un oggetto jQuery, pertanto non è possibile utilizzare il metodo addClass. Il modo giusto di fare ciò che si intende è:

per indice:

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

per valore riferimento:

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

Answer 4

farlo in questo modo

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

Questo aggiungerà classe test al 4 ° li

Spero che questo heps

Answer 5

Se si desidera utilizzare il metodo slice è necessario specificare l'attributo fine, che non trovi il

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

Answer 6

Seleziona il 4 ° a causa di inizio di indice Array da 0.

È sempre possibile utilizzare $ ('. How-long li: nth-child (4)');

Maggiori informazioni qui: http://api.jquery.com/nth-child-selector/

Answer 7

È possibile utilizzare il nth-child selector:

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

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