Comment récupérer uniquement les éléments enfants directs par une fonction jQuery

Question

J'ai une structure de tableau comme suit :

<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 une valeur de $(table1) et je veux ensuite obtenir tous les éléments enfants directs (tr) de <tbody> de table1 . Mon code est le suivant :

$('tr', tb1)

Apparemment, il renvoie tous les <tr> dans les tableaux 1 et 2. Je pense que je peux m'en sortir

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

ou ce type de logique.

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

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

Gracias.

Answer 1

Vous pouvez utiliser find() :

tbl.find("> tbody > tr")

Answer 2

Comme le mentionne @jave.web dans les commentaires

Pour effectuer une recherche parmi les enfants directs d'un élément, utiliser .children() . La recherche ne portera que sur les enfants directs, sans aller plus loin. http://api.jquery.com/children/

Answer 3

C'est précisément la raison pour laquelle il faut être prudent avec les tables gigognes. J'espère vraiment que vous les utilisez pour les données et non pour la mise en page.

Un autre problème qui va probablement vous gâcher la journée est l'utilisation de sélecteurs CSS sur des tableaux imbriqués... vous avez essentiellement le même problème - vous ne pouvez pas sélectionner les éléments TR du tableau extérieur sans sélectionner également ceux du tableau intérieur. (Vous ne pouvez pas utiliser le sélecteur enfant car il n'est pas implémenté dans IE6).

Cela devrait fonctionner :

$("#table1 > tbody > tr")

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

Answer 4

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

$('tb1 > tr')

Answer 5

Si vous avez les identifiants des deux éléments et que vous voulez trouver l'élément direct, utilisez le code suivant

$("#parent > #two")

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