JQuery получить элементы первого уровня TD в рамках существующего выбора

Question

Как и в некоторых существующих примерах, я хочу выбрать только первый уровень 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, это сработает, однако затем я пропускаю важную часть цикла.Есть ли синтаксис, который я могу использовать, чтобы работать таким образом в существующем выделении, то есть убедиться, что у родителя выбранного тд есть tr [tabid].

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

Спасибо :))

Answer 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/

Answer 2

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

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