jQuery Zebra selector

Question

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

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

В основном это говорит «Применить класс CSS даже для любого т.р. тега, который имеет один из родителей (на любом уровне) с классом сетки. " Проблема в том, что когда у меня есть вложенные таблицы, тэг-теги дочерней таблицы также получат четный стиль. Поскольку я не указал дочернюю таблицу с классом сетки, я не хочу, чтобы она забирала полосу зебры.

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

Answer 1

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

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

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

Answer 2

Существует большое сообщение в блоге jQuery, которое может вам пригодиться: Zebra Table Showdown.

Это сообщение также содержит интересное обсуждение того, как делать полосатые зебры в большинстве других основных библиотек JavaScript.

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