Est-ce un bug dans la façon dont jQuery traite les sélecteurs enfants?

Question

Y at-il un bogue dans la façon dont jQuery gère les sélecteurs enfants ou est-ce que je rate quelque chose d'évident? Je ne peux pas le faire fonctionner quand l'enfant est autre que *.

Voici le sélecteur jQuery je courais:

$("#myTable > tr").each(function() { 
    // do somthing } 
); 

Et la structure de la table est:

<table id="myTable"> 
    <tr> 
     <td><button>someButton</button></td> 
     <td><textarea>...</textarea></td> 
    </tr> 
</table> 

Aucun élément ne correspondent au dessus de #myTable > tr. Mais les deux sélecteurs énumérés ci-dessous fonctionnent bien.

$("#myTable tr") // search all descendants for tr 

ou utiliser un caractère générique pour correspondre les enfants:

$("#myTable > *") // search all child elements 

Toutes les idées sur ce qui pourrait être mal ici?

Merci pour les réponses rapides les gars! Malheureusement, ne peut en sélectionner un.

Answer 1

C'est parce que Firefox ajoute automatiquement tbody éléments autour de vos éléments tr si aucun n'est fourni. Vous ne pouvez vraiment pas utiliser table > tr.

Vous avez:

<table id="myTable"> 
    <tr> 
     <td><button>someButton</button></td> 
     <td><textarea>...</textarea></td> 
    </tr> 
</table> 

Mais Firefox Sées ceci:

<table id="myTable"> 
    <tbody> 
    <tr> 
     <td><button>someButton</button></td> 
     <td><textarea>...</textarea></td> 
    </tr> 
    </tbody> 
</table> 

D'autres éléments fonctionnent très bien:

<div> 
    <strong>Hi</strong> 
</div> 

Et le sélecteur:

alert($("div > strong").text()); // Alerts "Hi" 

Answer 2

Il y a un élément <tbody> implicite ajouté signifiant au lieu de:

<table id="myTable"> 
    <tr> 
    <td><button>someButton</button></td> 
    <td><textarea>...</textarea></td> 
    </tr> 
</table> 

DOM contient en fait:

<table id="myTable"> 
<tbody> 
    <tr> 
    <td><button>someButton</button></td> 
    <td><textarea>...</textarea></td> 
    </tr> 
</tbody> 
</table> 

changer de façon à:

$("#mytable > tbody > tr"); 

En utilisant <tbody>, <thead> et <tfoot> éléments dans vos tableaux est une bonne habitude à prendre.

Answer 3

oui, Doug a complètement raison. Juste pour compléter sa réponse, peut-être vous êtes au courant, ou peut-être pas, mais rappelez-vous que jQuery traverse le DOM, et pas le "texte" HTML que vous envoyez au navigateur.

Le DOM est l'interprétation du navigateur sur le code HTML que vous lui envoyez.