JQuery Zebra селектор

Question

У меня есть CSS-класс grid, который я размещаю на своих столах. Я хочу, чтобы Зебра убрал мои четные строки, поэтому я использую следующий код jQuery

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

Это в основном говорит: «Примените класс css даже к любому тегу tr, у которого есть родитель (на любом уровне) с классом grid». Проблема в том, что когда у меня есть вложенные таблицы, теги tr дочерней таблицы также получат четный стиль. Поскольку я не указывал дочернюю таблицу с классом сетки, я не хочу, чтобы она брала полоску зебры.

Как я могу указать, чтобы применять четный класс только к тегам tr, которые являются прямым потомком тега с классом сетки?

Answer 1

Вы хотите использовать другой селектор, такой как дочерний селектор:

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

Это ограничивает выбор, чтобы направлять детей только на .grid.

Answer 2

Есть отличное сообщение в блоге jQuery, которое может оказаться полезным: Стол Зебры Showdown .

В этом посте также содержится интересное обсуждение того, как выполнять чередование зебр в большинстве других основных библиотек JavaScript.

Прокрутите вниз, чтобы увидеть комментарии о добавлении эффектов наведения к полосам зебры с помощью jQuery.