So erhalten Sie mit der jQuery-Funktion nur direkte untergeordnete Elemente

86

Ich habe eine Tabellenstruktur wie diese:

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

In Javascript, habe ich eine Variable tblmit dem Wert $(table1), und dann will ich alle Elemente direkt Kind bekommen (tr) von <tbody>den table1. Mein Code lautet:

$('tr', tb1)

Anscheinend werden alle <tr>Elemente in Tabelle1 und Tabelle2 zurückgegeben. Ich denke, ich kann durchkommen

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

oder diese Art von Logik.

Ich weiß, $('table1 > tbody > tr')kann das direkte Kind bekommen tr. Leider kann ich das nicht benutzen.

Hat jemand eine gute Idee dazu?

Vielen Dank.

jquery parent-child Jason Li
quelle

Antworten:

176

Sie können verwenden find():

tbl.find("> tbody > tr")

Josh Leitzel
quelle
2
Das ist eine großartige Idee. $ ('> tbody> tr', tb1) funktioniert auch bei mir. Danke dir.
Jason Li
1
Das ist wunderbar, ich wusste nicht, dass Sie den direkten untergeordneten Selektor ( >) verwenden können, ohne etwas davor anzugeben. Danke dir.
Seidenfeuer
3
Beachten Sie, dass Sie für direkte Kinder, die nur eine Ebene tiefer liegen, einfach 'Kinder ([Selektor])' verwenden können.
Orad
37
DIRECT CHILDREN = eine Ebene tiefer Kinder , daher ist api.jquery.com/children die richtige Antwort, nicht find () - dass man ALLE Nachkommen des Elements bekommt (gefiltert nach Selektor) ...
jave.web
4
Sie sollten Ihren Kommentar zu einer separaten Antwort machen, da Ihre die richtige Antwort ist.
Mrmillsy
23

Wie @ jave.web in den Kommentaren erwähnt

Um die direkten untergeordneten Elemente eines Elements zu durchsuchen, verwenden Sie .children(). Es wird nur die direkten Kinder durchsuchen und nicht tiefer durchqueren. http://api.jquery.com/children/

Chris
quelle
5

Dies ist genau der Grund, warum man mit Verschachtelungstabellen vorsichtig sein sollte. Ich hoffe wirklich, dass Sie sie für Daten und nicht für das Seitenlayout verwenden.

Ein weiteres Problem, das Ihren Tag wahrscheinlich ruinieren wird, ist die Verwendung von CSS-Selektoren für verschachtelte Tabellen. Sie haben im Grunde das gleiche Problem: Sie können keine TR-Elemente der äußeren Tabelle auswählen, ohne auch die Elemente innerhalb der inneren Tabelle auszuwählen. (Sie können den untergeordneten Selektor nicht verwenden, da er nicht in IE6 implementiert ist.)

Das sollte funktionieren:

$("#table1 > tbody > tr")

Ich empfehle jedoch, das TBODY-Element fest zu codieren, da Sie sich nicht darauf verlassen sollten, dass der Browser es für Sie erstellt.

Šime Vidas
quelle
2

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

$('tb1 > tr')

Jeremy
quelle
2
Dies würde nur funktionieren, wenn tb1ein HTML-Tag wäre, was es nicht ist; und wenn tres ein direktes Kind davon wäre (was es nicht ist, ist es ein direktes Kind davon <tbody>).
Josh Leitzel