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

Question

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

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

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

$('tr', tb1)

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

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

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

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

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

Спасибо.

Answer 1

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

tbl.find("> tbody > tr")

Answer 2

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

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

Answer 3

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

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

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

$("#table1 > tbody > tr")

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

Answer 4

http://api.jquery.com/child-selector/

$('tb1 > tr')