2009-08-11 7 views
16

Tengo una lista de elementos que deseo diseñar de 3 formas diferentes.addClass every nth

Quiero que cada elemento de la 3ª lista tenga la misma clase en toda la lista.

Por ejemplo:

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

que puedo hacer con 2: par/impar, pero la forma de hacerlo con 3?

Respuesta

45

tratar

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

dude en para consolidarla para que sea más bonito, pero quería exponer a los selectores.

+2

Para que esto sea una solución de trabajo, use: $ ('ul li: nth -child (3n) '). addClass (' every-third-item-class '); – shuckster

+0

@brownstone - ver la edición, lo cambié para abordar su preocupación total (aunque sea de mano larga) – Marc

+1

Gracias Marc. Esto fue exactamente lo que quería. – davebowker

2

recomiendo algo como esto:

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

esto no funciona ... elimine la primera línea y agregue la "i" en .... cada uno (función (i) .... – ggzone