jQuery альтернативные цвета строк для нескольких таблиц

Question

Я замечаю проблему с чередующимися цветами строк, строго используя jquery. Вы можете посмотреть на это fiddle для примера того, что я опишу.

Я использую CSS3 для управления чередованием таблиц, который работает как ожидается в нескольких таблицах.

.table-zebra tbody > tr:nth-child(even) > td {background-color: lightgrey;} 

Каждый ровный ряд полосатый светло-серый. Счет начинается с первой строки.

Для браузеров, которые не поддерживают CSS3 я использую JQuery, чтобы имитировать это: (.table-полосатый используется для этого примера, чтобы показать разницу в скрипке)

$(".table-striped tr:odd").css("background-color", 'lightgrey'); 

Когда у меня есть несколько таблиц с нечетным числом строк jquery будет продолжать отсчет из предыдущей таблицы, и это чередует строки неправильно.

Помимо использования $ .each, есть более простой способ справиться с этим в jquery?

Answer 1

Насколько я знаю, :odd применяется ко всем <TR> и поэтому вы получите описанное вами поведение. Я не думаю, что есть способ изменить это и сделать :odd относительно текущего .table-striped, за исключением использования .each().

Для этого конкретного случая, хотя есть обходной путь с :nth-child:

$(".table-striped tr:nth-child(:odd)").css("background-color", 'lightgrey'); 

хотя это применимо, если конкретный <TR> является нечетным потомком своего непосредственного родителя и, следовательно, может делать неправильные вещи, если ваши <TABLE> s содержат несколько <TBODY> s.

Answer 2

CSS:

tr.even td { 
    background-color: green; 
} 
tr.odd td { 
    background-color: yellow; 
} 

JS:

$('.table-striped > tbody').each(function() { 
    $('tr:odd', this).addClass('odd').removeClass('even'); 
    $('tr:even', this).addClass('even').removeClass('odd'); 
}); 

DEMO HERE