jQuery pares/impares selectores de múltiples elementos

Question

que estoy usando el siguiente código de cebra pelar unas cuantas mesas en una sola página:

$(".events-table tr:even").css("background-color", "#fff"); 
$(".events-table tr:odd").css("background-color", "#efefef"); 

Esto está funcionando muy bien, pero las pares/intervalos impares se aplican a todas las tabla en la página. Me gustaría que cada mesa tenga el mismo patrón. Es decir, cada tabla debe comenzar con el mismo color en la primera fila, luego lo mismo en la segunda fila, para cada tabla en la página.

¿Alguna sugerencia?

Thx!

Answer 1

Intente agregar ID a sus tablas y actualizar CSS una tabla a la vez.

Answer 2

que probablemente podría utilizar un selector para la mesa y luego buscar las filas de color, es decir:

$(".events-table").each(function() 
{ 
    $(this).find("tr:even").css("background-color", "#fff"); 
    $(this).find("tr:odd").css("background-color", "#efefef"); 
}); 

Answer 3

El problema es que los .events-table tr selectores devuelve una lista de tr s independiente de si pertenecen a la misma mesa Los selectores :even y :odd se aplican a la lista completa.

Si no tiene una gran cantidad de tablas, puede usar identificadores en lugar de clases.

$("#events-table1 tr:even").css("background-color", "#fff"); 
$("#events-table1 tr:odd").css("background-color", "#efefef"); 
$("#events-table2 tr:even").css("background-color", "#fff"); 
$("#events-table2 tr:odd").css("background-color", "#efefef"); 

Answer 4

Uso :nth-child() (:nth-child(odd) y :nth-child(even)) en contraposición a :odd o :even

$("table.events-table tr:nth-child(even)").css("background-color", "#fff"); 
$("table.events-table tr:nth-child(odd)").css("background-color", "#efefef"); 

la :odd y :even son en realidad basan-0, lo que significa filas impares son 0,2,4, etc., y viceversa y se usan para obtener coincidencias pares e impares en el conjunto completo envuelto.

Eche un vistazo a this Working Demo para demostrar.

nth-child() realiza la selección en un elemento principal.

Answer 5

Los selectores impar e impar son "extensiones" específicas de jQuery. Según lo mencionado por bluenote, parecen operar en una lista de todos elementos del tipo objetivo (en su caso, toda tr en .events-table

Las alternativas incluyen:.

• Restringir el selector a la contexto de la tabla haciendo pasar a su elemento de la tabla como el segundo argumento $('tr:odd', mytable).css({})

• Usando el "verdadero" css selector de nth-child $('.events-table tr:nth-child(even)').css() aunque cuidado con los problemas de compatibilidad entre navegadores.

• Asignando una clase 'impar' o 'par' a las filas apropiadas y segmentando eso explícitamente.

Answer 6

$("tr:odd").css("background-color", "#bbbbff"); 

cambiará filas impares para todas las tablas en la página, se puede poner otro, incluso para