Блог

Главная - Вопросы по программированию - jquery получает td-элементы первого уровня в существующей выборке

jquery получает td-элементы первого уровня в существующей выборке

#jquery #jquery-selectors

#jquery #jquery-селекторы

Вопрос:

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

Допустим, у меня есть таблица, подобная этой…

 <table border=1>
<tr trid="1">
   <td>cell 1</td>
   <td>cell 2</td>
   <td>cell 3</td>
</tr>
<tr trid="2">
   <td>cell 1</td>
   <td>

       <table border=1>
        <tr>
           <td>cell 1</td>
           <td>cell 2</td>
           <td>cell 3</td>
        </tr>
        <tr>
           <td>cell 1</td>
           <td>cell 2</td>
           <td>cell 3</td>
        </tr>
       </table>

   </td>
   <td>cell 3</td>
</tr>
<tr trid="3">
   <td>cell 1</td>
   <td>cell 2</td>
   <td>cell 3</td>
</tr>
</table>

Я хочу сначала просмотреть эту конкретную таблицу строка за строкой. Я хочу перемещаться только по строкам, которые имеют пользовательский атрибут «trid».

Мне удалось зайти так далеко…

     $('tr[trid]').each(function(index)
    {
        //gets properties of TR here

        $('td',this).each(function(index)
        {
            $(this).css('background-color', 'red'); //turn my cells red
        });

    });

Теперь это работает, но мне нужен только первый уровень ячеек. Поэтому я хочу, чтобы цикл TD игнорировал второй уровень td.

Я знаю, что если бы во внешнем цикле использовался tr [trid]> td, это сработало бы, однако затем я пропускаю важную часть цикла. Есть ли синтаксис, который я могу использовать, чтобы подобным образом работать с существующим выделением, т. е. убедиться, что родительский элемент выбранного td имеет tr[tabid].

Это довольно специфично в том смысле, что я в любом случае не могу добавлять новые стили или изменять существующий HTML. Кроме того, порядок цикла jQuery также важен, поскольку он выводится по мере выполнения и должен сохранять свою последовательность.

Спасибо 🙂

Комментарии:

1. Возможно, вам следует использовать data-trid="" вместо того, чтобы пытаться создавать свои собственные атрибуты.

Ответ №1:

Вместо 

 $('td',this).each(function(index)

использование

 $(this).children('td').each(function(index)

пример: http://jsfiddle.net/gaby/tz2jt/1 /

или более загадочный (но вы поняли идею)

 $('> td',this).each(function(index)

пример: http://jsfiddle.net/gaby/tz2jt /

Ответ №2:

Вы можете использовать .children() метод, который обходит непосредственных дочерних элементов элементов, для которых вы его вызываете.

 $(this).children('td').each(function() {
    $(this).css('background-color', 'red');
});