jQuery нечетные / четные селекторы для нескольких элементов

Question

Я использую следующий код для удаления нескольких таблиц на одной странице:

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

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

Есть предложения?

Thx!

Answer 1

вы, вероятно, можете использовать селектор для таблицы, а затем найти строки для цвета, то есть:

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

Answer 2

Используйте :nth-child() (:nth-child(odd) и :nth-child(even)) вместо :odd или :even

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

:odd и :even на самом деле основаны на 0, то есть нечетные строки равны 0,2,4 и т. Д. И наоборот, и используются для получения нечетных и четных совпадений в полном обернутом наборе.

Взгляните на это Рабочее Демо , чтобы продемонстрировать.

nth-child() выполняет выбор на основе родительского элемента.

Answer 3

Проблема в том, что селекторы .events-table tr возвращают список tr независимо от того, принадлежат ли они к одной и той же таблице. Селекторы :even и :odd применяются к полному списку.

Если у вас нет невероятно большого количества таблиц, вы можете просто использовать идентификаторы, а не классы.

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

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

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

Answer 5

Селекторы: odd и: even являются специфичными для jQuery «расширениями». Как упомянуто bluenote, они, кажется, работают со списком всех элементов целевого типа (в вашем случае, всех tr в .events-table.

Альтернативы включают в себя:

• Ограничение селектора контекстом таблицы путем передачи элемента таблицы в качестве второго аргумента $('tr:odd', mytable).css({})

• Использование «настоящего» селектора css nth-child $('.events-table tr:nth-child(even)').css(), но остерегайтесь проблем совместимости с различными браузерами.

• Назначение класса «нечетный» или «четный» соответствующим строкам и нацеливание на него явно.

Answer 6

Попробуйте добавить идентификаторы в свои таблицы и обновлять CSS по одной таблице за раз.