Как выбрать только непосредственные потомки элемента в jQuery

Question

Я пишу HTML-страницу с некоторыми JQuery для стиля. Итак, у меня есть следующее:

$("table tr:odd td").css({"background-color":"rgb(233,247,255)"});

Это делает каждый второй ряд синеватым. Но только сейчас я положил стол внутри одной из ячеек. Что случилось? Ну, он обработал строку внутренней таблицы так, как будто это была строка во внешней таблице, и раскраска испортилась (две последовательные синие строки, в то время как строка во внутренней таблице осталась белой).

Итак, как мне исключить вложенные таблицы в таком селекторе? Кто-нибудь?

EDIT:

Спасибо за ваши идеи и ответы. Я придумал этот фрагмент кода, потому что я действительно хочу, чтобы все таблицы имели четную / нечетную раскраску (не только таблицы верхнего уровня):

$("table").each(function()
{   $(this).children().children(":odd").css({"background-color":"rgb(240,255,250)"});
     $(this).children().children(":even").css({"background-color":"rgb(233,247,255)"});
}); 

Проблема в том, что это, кажется, окрашивает только первый ряд - я понятия не имею, почему. Кто-нибудь видит почему?

РЕШЕНИЕ: Я понял это. Проблема в том, что браузеры do фактически вставляют тег tbody, и вы должны его вычислить. Вот окончательный результат, который я использую:

$("table").each(function()
{   $(this).children().children(":odd").children().css({"background-color":"green"});
     $(this).children().children(":even").children().css({"background-color":"blue"});
}); 

Answer 1

Вы можете использовать дочерний селектор >. Браузер должен вставить элемент tbody:

$("#myTable > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"}); 

Answer 2

Russ Cam вдохновил меня снова ответить на вопрос без использования идентификатора на столе, и вот что я придумал:

$("table:not(td > table) > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"});

Здесь я выбираю все td в каждой нечетной строке в таблицах, которые не являются потомками <td>. Рабочая демонстрация здесь.

Answer 3

Самый простой способ - присвоить внешней таблице идентификатор, такой как CSS class или id. Тогда это тривиально. Кстати, я думаю, что селектор :odd должен быть :nth-child(odd)

$("table.highlight > tr:nth-child(odd) > td")
    .css({"background-color":"rgb(233,247,255)"});

Здесь мы используем класс CSS highlight для внешней таблицы, и поэтому ячейки внутренней таблицы в нечетных строках не применяют стиль.

EDIT:

Без какого-либо идентификатора все немного сложнее, но это работает (хотя я уверен, что есть более краткий способ сделать это)

$("table")
    .filter(function() { return this.parentNode.nodeName.toLowerCase() !== "td" })
    .children('tbody').children('tr:nth-child(odd)').children('td')
    .css({"background-color":"rgb(233,247,255)"});

find() нельзя использовать вместо children(), поскольку нечетные строки внутренней таблицы также будут совпадать и возвращаться в упакованном множестве.

Вот Рабочая демоверсия

EDIT:

В ответ на ваш отредактированный вопрос чередование нечетных или четных строк для каждой таблицы является простым

$('table tbody').children('tr:nth-child(odd)').css({"background-color":"green"})

Я бы порекомендовал использовать :nth-child(odd|even) сверх :odd|even, так как первый является индексом, основанным на единице, и поэтому нечетные строки (1,3,5 и т. Д.) выбран; Последнее основано на нуле, что означает, что четные строки (2,4,6 и т. Д.) Будут «нечетными строками». На мой взгляд, не совсем совпадают селекторы с семантическим названием. Кроме того, я бы рекомендовал использовать стиль CSS для этого над встроенным стилем и применить класс CSS к <tr>, используя addClass(). Использование классов CSS позволит вам легко модифицировать стили и применять их на разных страницах. Примерно так:

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

Чтобы применить чередование зебр к столу, у вас есть, на мой взгляд, два реальных варианта

1. Примените один фоновый цвет ко всем <tr> элементам в таблице, а затем просто добавьте класс CSS в нечетные / четные строки, чтобы добавить другой цвет фона, с которым вы хотите нанести полосу.

2. Применение обоих классов CSS с помощью jQuery.

Вот код для второго варианта

$('table tbody')                 // find <tbody> that are descendents of <table>
  .children('tr:nth-child(odd)') // find odd <tr>
  .addClass('odd')               // add odd class
  .end()                         // jump back to previous wrapped set
  .children('tr:nth-child(even)')// find even <tr>
  .addClass('even');             // add even class

И Рабочая демоверсия . добавьте / edit к URL, чтобы увидеть код.

Answer 4

Пример Грега:

$("table > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"});

Не будет работать, так как будут выбраны все таблицы на странице. Лучшее решение - добавить идентификатор в таблицу и изменить код на:

$("#the-table > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"});

Answer 5

Какой родительский элемент для вашей родительской таблицы? Попробуйте использовать потомок селектор с ним. например Если ваша родительская таблица находится непосредственно под телом:

$("body > table >  tr:odd > td").css({"background-color":"rgb(233,247,255)"});

или если вы указали tbody в разметке:

$("body > table > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"});