2010-09-10 2 views
59

J'ai une structure de table comme ceci:Comment arriver que des éléments enfants directs par fonction jQuery

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

En javascript, j'ai une tbl variable valeur de $(table1), et je veux tout enfant direct éléments (tr) de <tbody> de table1. Mon code est:

$('tr', tb1) 

Apparemment, il retourne tous les <tr> éléments dans le tableau 1 et table2. Je pense que je peux obtenir par

$('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 utiliser cela.

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

Merci.

Répondre

136

Vous pouvez utiliser find():

tbl.find("> tbody > tr")

+1

c'est une idée brillante. $ ('> tbody> tr', tb1) fonctionne aussi pour moi. Je vous remercie. –

+0

C'est merveilleux, je ne savais pas que vous pouviez utiliser le sélecteur d'enfant direct ('>') sans spécifier quoi que ce soit en face de lui. Je vous remercie. – silkfire

+2

Notez que pour les enfants directs qui n'ont qu'un seul niveau, vous pouvez simplement utiliser 'children ([selector])'. – orad

0
+2

Cela ne fonctionnerait que si 'tb1' était une balise HTML, ce qui n'est pas le cas; et si 'tr' en était un enfant direct (ce qui n'est pas le cas, c'est un enfant direct de' '). –

4

C'est exactement la raison pour laquelle il faut être prudent avec les tables de nidification. J'espère vraiment que vous les utiliserez pour les données et non pour la mise en page. L'utilisation de sélecteurs CSS sur des tables imbriquées risque de gâcher votre journée ... vous avez essentiellement le même problème: vous ne pouvez pas sélectionner les éléments TR de la table externe sans les sélectionner dans la table interne. (Vous ne pouvez pas utiliser le sélecteur d'enfant car il n'est pas mis en œuvre dans IE6)

Cela devrait fonctionner:

$("#table1 > tbody > tr") 

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

10

Comme @ jave.web mentionné dans les commentaires

Pour effectuer une recherche à travers les enfants directs d'un élément .children() utiliser. Il ne cherchera qu'à travers les enfants directs et ne traversera pas plus profondément. http://api.jquery.com/children/

Questions connexes