web-dev-qa-db-fra.com

Comment obtenir uniquement des éléments enfants directs par la fonction jQuery

J'ai une structure de table comme celle-ci:

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

En javascript, j'ai une variable tbl avec la valeur de $(table1), puis je veux obtenir tous les éléments enfants directs (tr) de <tbody> De table1. Mon code est:

$('tr', tb1)

Apparemment, il renvoie tous les éléments <tr> Dans table1 et table2. Je pense que je peux m'en sortir

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

ou ce genre de logique.

Je sais que $('table1 > tbody > tr') peut obtenir l'enfant direct tr. Malheureusement, je ne peux pas l'utiliser.

Quelqu'un a une bonne idée à ce sujet?

Merci.

jqueryparent-child
76
Jason Li

Vous pouvez utiliser find() :

tbl.find("> tbody > tr")

163
Josh Leitzel

Comme @ jave.web l'a mentionné dans les commentaires

Pour rechercher parmi les enfants directs d'un élément, utilisez .children(). Il ne recherchera que les enfants directs et ne traversera pas plus profondément. http://api.jquery.com/children/

22
Chris

C'est exactement la raison pour laquelle il faut être prudent avec les tables d'imbrication. J'espère vraiment que vous les utiliserez pour les données et non pour la mise en page.

Un autre problème qui gâchera probablement votre journée est l'utilisation de sélecteurs CSS sur les tables imbriquées ... vous avez essentiellement le même problème - vous ne pouvez pas sélectionner les éléments TR de la table externe sans sélectionner également ceux à l'intérieur de la table interne. (Vous ne pouvez pas utiliser le sélecteur enfant car il n'est pas implémenté dans IE6)

Cela devrait fonctionner:

$("#table1 > tbody > tr")

Cependant, je vous recommande de coder en dur l'élément TBODY, car vous ne devez pas compter sur le navigateur pour le créer pour vous.

4
Šime Vidas

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

$('tb1 > tr')

1
Jeremy