Comment obtenir uniquement les é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 tblavec la valeur de $(table1), puis je veux obtenir tous les éléments enfants directs (tr) de <tbody>of table1. Mon code est:

$('tr', tb1)

Apparemment, il renvoie tous les <tr>éléments de 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 je $('table1 > tbody > tr')peux obtenir l'enfant direct tr. Malheureusement, je ne peux pas utiliser cela.

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

Merci.

Vous pouvez utiliser find():

tbl.find("> tbody > tr")

Comme @ jave.web mentionné dans les commentaires

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

C'est exactement la raison pour laquelle il faut être prudent avec les tables gigognes. 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 fondamentalement le même problème - vous ne pouvez pas sélectionner les éléments TR de la table externe sans sélectionner ceux à l'intérieur de la table interne, aussi. (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 vous fier au navigateur pour le créer pour vous.

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

$('tb1 > tr')

Si vous avez les identifiants des deux éléments et que vous souhaitez trouver un élément direct, utilisez le code ci-dessous

$("#parent > #two")

Si vous voulez une recherche imbriquée, vous pouvez utiliser find. Il est expliqué en détail ici. https://handyopinion.com/jquery-selector-find-nested-child-elements/