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

91

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

<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>элементы в table1 и table2. Я думаю, что смогу обойтись

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

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

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

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

Благодарю.

Джейсон Ли
источник

Ответы:

180

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

tbl.find("> tbody > tr")

Джош Лейтцель
источник
2
это отличная идея. $ ('> tbody> tr', tb1) также у меня работает. Спасибо.
Джейсон Ли,
2
Это замечательно, я не знал, что вы можете использовать прямой дочерний селектор ( >), не указывая ничего перед ним. Спасибо.
silkfire
3
Обратите внимание, что для прямых потомков, которые находятся только на один уровень ниже, вы можете просто использовать «children ([selector])».
orad
39
DIRECT CHILDREN = дети на один уровень ниже , поэтому api.jquery.com/children - правильный ответ, а не find () - он получает ВСЕ потомки элемента (отфильтрованные селектором) ...
jave.web
4
Вы должны сделать свой комментарий отдельным ответом jave.web, поскольку ваш правильный ответ.
mrmillsy
24

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

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

Крис
источник
5

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

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

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

$("#table1 > tbody > tr")

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

Шиме Видас
источник
2

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

$('tb1 > tr')

Джереми
источник
2
Это работало бы только в случае tb1использования HTML-тега, а это не так; и если бы trбыли его прямым потомком (а это не так, это прямой потомок <tbody>).
Джош Лейтцель,
1

Если у вас есть идентификаторы обоих элементов, и вы хотите найти прямое использование элемента ниже, код

$("#parent > #two")

Если вам нужен вложенный поиск, вы можете использовать find. Это подробно объясняется здесь. https://handyopinion.com/jquery-selector-find-nested-child-elements/

Ахмед Билал
источник