Jak uzyskać tylko bezpośrednie elementy potomne za pomocą funkcji jQuery

89

Mam taką strukturę tabeli:

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

W javascript mam zmienną tblo wartości $(table1), a następnie chcę uzyskać wszystkie bezpośrednie elementy potomne (tr) <tbody>of table1. Mój kod to:

$('tr', tb1)

Najwyraźniej zwraca wszystkie <tr>elementy z tabeli1 i tabeli2. Myślę, że dam radę

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

lub tego rodzaju logika.

Wiem, że $('table1 > tbody > tr')mogę dostać bezpośrednie dziecko tr. Niestety nie mogę tego użyć.

Czy ktoś ma o tym dobry pomysł?

Dzięki.

Jason Li
źródło

Odpowiedzi:

178

Możesz użyć find():

tbl.find("> tbody > tr")

Josh Leitzel
źródło
2
to wspaniały pomysł. $ ('> tbody> tr', tb1) również działa dla mnie. Dziękuję Ci.
Jason Li,
1
To cudowne, nie wiedziałem, że można użyć bezpośredniego selektora dziecka ( >) bez podawania czegokolwiek przed nim. Dziękuję Ci.
silkfire
3
Zauważ, że w przypadku bezpośrednich dzieci, które są tylko o jeden poziom niżej, możesz po prostu użyć „dzieci ([selector])”.
orad
37
DIRECT CHILDREN = dzieci o jeden poziom niżej , dlatego api.jquery.com/children jest właściwą odpowiedzią, a nie find () - pobiera WSZYSTKICH potomków elementu (filtrowane według selektora) ...
jave.web
4
Powinieneś zamieścić swój komentarz jako osobną odpowiedź jave.web, ponieważ twoja jest poprawną odpowiedzią.
mrmillsy
23

Jak wspomniano w komentarzach @ jave.web

Aby przeszukać bezpośrednie elementy potomne elementu, użyj .children(). Przeszukuje tylko bezpośrednie dzieci i nie przechodzi głębiej. http://api.jquery.com/children/

Chris
źródło
5

To jest właśnie powód, dla którego należy uważać przy zagnieżdżaniu tabel. Naprawdę mam nadzieję, że użyjesz ich do danych, a nie układu strony.

Inną kwestią, która prawdopodobnie zrujnuje Twój dzień, jest używanie selektorów CSS na zagnieżdżonych tabelach ... w zasadzie masz ten sam problem - nie możesz wybrać elementów TR tabeli zewnętrznej bez wybrania tych również w tabeli wewnętrznej. (Nie możesz użyć selektora podrzędnego, ponieważ nie jest on zaimplementowany w IE6)

To powinno działać:

$("#table1 > tbody > tr")

Zalecam jednak zakodowanie na stałe elementu TBODY, ponieważ nie powinieneś polegać na przeglądarce, aby utworzyła go za Ciebie.

Šime Vidas
źródło
2

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

$('tb1 > tr')

Jeremy
źródło
2
To działałoby tylko wtedy, gdyby tb1był tagiem HTML, a tak nie jest; i gdyby trbył jego bezpośrednim dzieckiem (a nie jest, jest jego bezpośrednim dzieckiem <tbody>).
Josh Leitzel,