jQuery Zebra selector

Question

Tengo una clase de CSS llamada grid que coloco en mis tablas. Quiero cebra tira de mis filas pares, así que uso el siguiente código de jQuery

$(".grid tr:nth-child(even)").addClass("even"); 

Esto básicamente dice "Aplicar la clase css incluso a cualquier etiqueta tr que tiene un padre (a cualquier nivel) con una clase de cuadrícula. " El problema con esto es cuando tengo tablas anidadas, las etiquetas tr de la tabla hija también obtendrán el estilo par. Como no especifiqué la tabla secundaria con una clase de cuadrícula, no quiero que recoja la franja de cebra.

¿Cómo puedo especificar que solo aplique la clase par en etiquetas tr que son descendientes directos de la etiqueta que tiene la clase de cuadrícula?

Answer 1

que desee utilizar un selector diferente, al igual que el selector de hijo:

$(".grid > tr:nth-child(even)").addClass("even"); 

Esto limita la selección a guiar a los hijos de su .grid solamente.

Answer 2

Hay una gran publicación de blog jQuery que puede serle útil: Zebra Table Showdown.

Esta publicación también incluye una interesante discusión sobre cómo hacer bandas de cebra en la mayoría de las otras bibliotecas principales de JavaScript.

Desplácese hacia abajo para ver comentarios sobre cómo agregar efectos de desplazamiento a su franja de cebra utilizando jQuery.