Si tratta di un errore nel modo in cui jQuery tratta i selettori figlio?

Question

C'è un bug nel modo in cui jQuery gestisce i selettori figlio o mi sto perdendo qualcosa di ovvio? Non riesco a farlo funzionare quando il bambino è diverso da *.

Ecco il selettore jQuery Sto facendo funzionare:

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

E la struttura della tabella è:

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

Nessun elementi sono abbinati con il selettore sopra #myTable > tr. Ma i due selettori elencati di seguito funzionano bene.

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

o utilizzare un carattere jolly per abbinare i bambini:

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

tutte le idee su che cosa potrebbe essere sbagliato?

Grazie per le risposte rapide ragazzi! Purtroppo puoi selezionarne solo uno.

Answer 1

È perché Firefox aggiunge automaticamente gli elementi tbody agli elementi tr se non ne viene fornito nessuno. Non puoi davvero usare table > tr.

Hai:

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

Ma Firefox vede questo:

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

Altri elementi funzionano bene:

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

e il selettore:

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

Answer 2

C'è un implicito <tbody> elemento aggiunto significato anziché:

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

DOM contiene effettivamente:

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

quindi modificarla in:

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

Utilizzando <tbody>, <thead> e <tfoot> elementi nei tuoi tavoli è una buona abitudine per entrare.

Answer 3

sì, Doug ha ragione. Giusto per completare la sua risposta, forse sei consapevole, o forse no, ma ricorda che jQuery attraversa il DOM, e non il "testo" HTML che invii al browser.

Il DOM è l'interpretazione del browser sull'HTML che viene inviato.