2009-08-11 12 views
16

Mam listę elementów, które chcę nadać styl na 3 różne sposoby.addClass co nth

Chcę, aby co trzeci element listy miał tę samą klasę na całej liście.

Na przykład:

<li class="A">Some Content</li> 
<li class="B">Some Content</li> 
<li class="C">Some Content</li> 
<li class="A">Some Content</li> 
<li class="B">Some Content</li> 
<li class="C">Some Content</li> 
<li class="A">Some Content</li> 
<li class="B">Some Content</li> 
<li class="C">Some Content</li> 

mogę zrobić 2 z: parzyste/nieparzyste, ale jak to zrobić z 3?

Odpowiedz

45

spróbować

$("ul li:nth-child(3n+1)").addClass("A") 
$("ul li:nth-child(3n+2)").addClass("B") 
$("ul li:nth-child(3n)").addClass("C") 

Zapraszam do skonsolidowania go, aby to ładniej, ale chciałem narażać selektorów.

+2

Aby to zrobić działające rozwiązanie użyj: $ ('ul li: nth -child (3n) '). addClass ("co trzecia klasa pozycji"); – shuckster

+0

@brownstone - zobacz edycję, zmieniłem ją, by zająć się jego całkowitą troską (aczkolwiek samotna) – Marc

+1

Dzięki Marc. To było dokładnie to, co ja poszukiwany – davebowker

2

Polecam coś takiego:

var i = 0; 
$("li").each(function() { 
    var newClass = 'A'; 
    if (i % 3 == 1) newClass = 'B'; 
    if (i % 3 == 2) newClass = 'C'; 
    $(this).addClass(newClass); 
}); 
+2

to nie działa ... usuń pierwszy wiersz i dodaj "i" w .... każdy (funkcja (i) .... – ggzone