jQuery parzyste/nieparzyste Selektory dla wielu elementów

Question

Używam następujący kod do zebra rozebrać kilka stolików na jednej stronie:

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

To działa dobrze, ale parzyste/nieparzyste przedziały są stosowane do każdego tabela na stronie. Chciałbym, aby każdy stół miał ten sam wzór. Oznacza to, że każda tabela powinna zaczynać się od tego samego koloru w pierwszym wierszu, a następnie w drugim rzędzie dla każdej tabeli na stronie.

Wszelkie sugestie?

Thx!

Answer 1

Spróbuj dodać identyfikatory do swoich tabel i aktualizuj tabelę CSS na raz.

Answer 2

prawdopodobnie można użyć przełącznika na stole, a następnie znaleźć wiersze do koloru, czyli:

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

Answer 3

Problemem jest to, że .events-table tr selektorów zwraca listę tr s niezależnie od tego, czy należą one do ten sam stół. Selektory :even i :odd zostaną zastosowane do pełnej listy.

Jeśli nie masz zbyt dużej liczby stołów, możesz po prostu użyć identyfikatorów, a nie klas.

$("#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

Zastosowanie :nth-child() (:nth-child(odd) i :nth-child(even)), w przeciwieństwie do :odd lub :even

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

:odd i :even są rzeczywiście oparty o 0, co oznacza, nieparzyste wiersze są 0,2,4 itd i vice-versa i są używane do uzyskania nieparzystych i parzystych dopasowań w kompletnym opakowanym zestawie.

Spójrz na this Working Demo, aby zademonstrować.

nth-child() dokonuje selekcji na podstawie elementu nadrzędnego.

Answer 5

Parametry: parzyste i: selektory są specyficznymi dla jQuery "rozszerzeniami". Jak wspomniano przez Bluenote, wydają się działać na liście wszystkich elementów typu docelowego (w przypadku, wszystko tr w .events-table

Alternatywy obejmują:.

• Ograniczenie wybierak do kontekst stół przekazując swój element tabeli jako drugi argument $('tr:odd', mytable).css({})

• Korzystanie z „prawdziwym” css selektor nth-child $('.events-table tr:nth-child(even)').css() choć strzeżcie kwestii zgodności z różnymi przeglądarkami.

• Przypisywanie klasy "nieparzystej" lub "parzystej" do odpowiednich wierszy i kierowanie jawnie.

Answer 6

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

zmieni nieparzystych wierszy dla wszystkich tabel na stronie można umieścić jeszcze jeden dla nawet