Как получить только прямые дочерние элементы с помощью функции jQuery

У меня есть такая структура таблицы, как это:

<table1>
  <tbody>
    <tr>
      <td></td>
        ...
      <td>
        <table2>
          <tbody>
            <tr>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
   </tbody>
  </table>

В javascript у меня есть переменная tbl со значением $(table1), а затем я хочу получить все прямые дочерние элементы (tr) <tbody> of table1. Мой код:

$('tr', tb1)

По-видимому, он возвращает все элементы <tr> в таблице1 и таблице2. Я думаю, что я могу получить

$('tr', tb1).not(function(){return $(this).parent().parent()[0] != tb1;})

или такая логика.

Я знаю, что $('table1 > tbody > tr') может получить прямой дочерний tr. К сожалению, я не могу использовать это.

У кого-нибудь есть хорошее представление об этом?

Спасибо.

Ответы

Ответ 1

Вы можете использовать find():

tbl.find("> tbody > tr")

Ответ 2

Как @jave.web упоминается в комментариях

Для поиска прямых дочерних элементов элемента используйте .children(). Он будет искать только прямых детей и не пересекать все глубже. http://api.jquery.com/children/

Ответ 3

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

Другая проблема, которая, вероятно, испортит ваш день, - это использование селекторов CSS на вложенных таблицах... в основном у вас такая же проблема: вы не можете выбрать элементы TR внешней таблицы, не выбирая их внутри внутренней таблицы. (Вы не можете использовать дочерний селектор, потому что он не реализован в IE6)

Это должно работать:

$("#table1 > tbody > tr")

Однако я рекомендую вам жестко закодировать элемент TBODY, так как вы не должны полагаться на браузер, чтобы создать его для вас.