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

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

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

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

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

РЕДАКТИРОВАТЬ:

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

$("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)"});
}); 

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

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

$("table").each(function()
{   $(this).children().children(":odd").children().css({"background-color":"green"});
     $(this).children().children(":even").children().css({"background-color":"blue"});
}); 
13.10.2009 07:52:58
5 ОТВЕТОВ
РЕШЕНИЕ

Расс Кэм вдохновил меня ответить на вопрос снова, не используя идентификатор на столе, и вот что я придумал:

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

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

5
13.10.2009 08:55:16
+1 - это работает, лучший селектор и менее сложный, чем при использовании, filter()как я и предлагал. Я думал, что будет способ выбора :)
Russ Cam 13.10.2009 08:57:23
Это прекрасно работает именно для того, что я просил. Проблема в том, что я не совсем понял. Я не хочу исключать все подтаблицы - я просто хочу, чтобы каждая таблица обрабатывалась индивидуально (даже подтаблицы). Но это хорошее решение, и я мог бы использовать его для каждого уровня таблиц отдельно. Спасибо!
B T 13.10.2009 18:45:50
что за идея, сэр джи :-)
Saurabh Chandra Patel 22.08.2013 17:08:17

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

$("#myTable > tbody > tr:odd > td").css({"background-color":"rgb(233,247,255)"}); 
7
13.10.2009 08:27:05
Это все еще выбирает ячейку в дочерней таблице, потому что она имеет свои собственные элементы tr.
Lance Fisher 13.10.2009 08:21:37
Вам нужно выбрать конкретную таблицу
Greg 13.10.2009 08:27:19

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

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

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

РЕДАКТИРОВАТЬ:

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

$("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()потому что нечетные строки внутренней таблицы также будут совпадать и будут возвращаться в упакованном множестве.

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

РЕДАКТИРОВАТЬ:

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

$('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

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

4
14.10.2009 08:12:24

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

$("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)"});
0
13.10.2009 08:37:56
tbodyне требуется, если вы не указали в разметке - jsbin.com/itebi - демонстрацию с использованием идентификатора класса CSS
Russ Cam 13.10.2009 08:32:41
Спасибо, я включил ваш комментарий в мой ответ.
Lance Fisher 13.10.2009 08:38:14

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

$("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)"});
0
13.10.2009 08:27:17