Как да получите само директни дъщерни елементи чрез функцията jQuery

Имам структура на таблицата като тази:

<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. За съжаление не мога да използвам това.

Някой има ли добра идея за това?

Благодаря.


jquery parent-child
person Jason Li    schedule 10.09.2010    source източник

Отговори (5)


arrow_upward
186
arrow_downward

Можете да използвате find():

tbl.find("> tbody > tr")

person Josh Leitzel    schedule 10.09.2010
comment
това е брилянтна идея. $('› tbody › tr', tb1) също работи за мен. Благодаря ти. - person Jason Li; 10.09.2010
comment
Това е чудесно, не знаех, че можете да използвате директния дъщерен селектор (>), без да посочвате нищо пред него. Благодаря ти. - person silkfire; 24.10.2013
comment
Имайте предвид, че за директни деца, които са само едно ниво надолу, можете просто да използвате 'children([селектор])'. - person orad; 31.10.2013
comment
ДИРЕКТНИ ДЕЦА = едно ниво надолу деца, следователно api.jquery.com/ children е правилният отговор, а не find() - че човек получава ВСИЧКИ наследници на елемент (филтриран от селектор)... - person jave.web; 25.06.2014
comment
Трябва да направите коментара си отделен отговор jave.web, тъй като вашият е правилният отговор. - person mrmillsy; 13.10.2014

arrow_upward
26
arrow_downward

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

За да търсите в директните деца на даден елемент, използвайте .children(). Той ще търси само през преките потомци и няма да преминава по-дълбоко. http://api.jquery.com/children/

person Chris    schedule 22.06.2015

arrow_upward
5
arrow_downward

Точно това е и причината да се внимава с таблиците за гнездене. Наистина се надявам да ги използвате за данни, а не за оформление на страници.

Друг проблем, който вероятно ще съсипе деня ви, е използването на CSS селектори на вложени таблици... вие по същество имате същия проблем - не можете да изберете TR елементи от външната таблица, без да изберете и тези във вътрешната таблица. (Не можете да използвате дъщерния селектор, защото не е внедрен в IE6)

Това трябва да работи:

$("#table1 > tbody > tr")

Въпреки това препоръчвам да кодирате твърдо елемента TBODY, тъй като не трябва да разчитате на браузъра да го създаде вместо вас.

person Šime Vidas    schedule 10.09.2010

arrow_upward
2
arrow_downward

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

$('tb1 > tr')

person Jeremy    schedule 10.09.2010
comment
Това ще работи само ако tb1 е HTML таг, което не е; и ако tr беше пряко дете на него (което не е, то е пряко дете на <tbody>). - person Josh Leitzel; 10.09.2010

arrow_upward
1
arrow_downward

Ако имате идентификатори на двата елемента и искате да намерите директен елемент, използвайте кода по-долу

$("#parent > #two")

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

person Ahmed Bilal    schedule 03.11.2019