2009-11-24 12 views
9

jQuery tiene la mano: pares e impares: selectores para seleccionar los elementos Even-o indexados impares en un conjunto, que estoy usando para borrar todos los demás elementos en una serie de cajas flotaban, de la siguiente manera:Seleccione cada enésimo elemento en jQuery?

<div class='2up'> 
    <div> ... </div> 
    <div> ... </div> 
    ... 
    <div> ... </div> 
</div> 

y

// Clear every 2nd block for 2-up blocks 
$('.2up>div:even').css("clear", "both"); 

Esto funciona como un encanto.

Mi pregunta: ¿Hay alguna manera directa en jQuery de seleccionar cada tercer o cuarto elemento, así que podría hacer lo mismo con los artículos de 3 o 4 arriba?

Respuesta

25

Probar:

$("div:nth-child(3n+1)").css("clear", "both"); 
+1

': nth-child' es también CSS3 estándar, mientras que': odd' es un jQuery/Sizzle-única extensión que no funciona en sus hojas de estilo. – bobince

+0

También podría usar CSS solo si desea aplicar estilos: '.twoup div: nth-child (4n + 1) {clear: both;}' –

1

No, no como tal. Sin embargo, la función filter le permitirá hacerlo.


EDIT:

mi error. Use la función de n-ésimo hijo para simplificar.

2

se puede utilizar el selector de :nth-child(index/even/odd/equation).

Ejemplo:

<div class='5up'> 
    <div> ... </div> 
    <div> ... </div> 
    ... 
    <div> ... </div> 
</div>
y
// Clear every 5th block for 5-up blocks 
$('.5up>div:nth-child(5n)').css("clear", "both");
o
// Clear after every 5th block for 5-up blocks 
// note: This will also clear first block. 
$('.5up>div:nth-child(5n+1)').css("clear", "both");

+0

FWIW: Dado que es de base cero, '(5n)' se borra antes del 5to bloque y cada 5to siguiente, por lo que terminas con 4 bloques en la primera fila y 5 en las filas siguientes. '(5n + 1)' funciona a la perfección. –

Cuestiones relacionadas