¿Esto es un error en cómo jQuery trata a los selectores de niños?

Question

¿Hay algún error en la forma en que jQuery maneja los selectores de niños o me estoy perdiendo algo obvio? No puedo hacer que funcione cuando el niño no es *.

Aquí está el selector de jQuery Me postulo:

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

Y la estructura de la tabla es:

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

No hay elementos se corresponden con el selector #myTable > tr anteriormente. Pero los dos selectores enumerados a continuación funcionan bien.

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

o utilizar un comodín para que coincida con los niños:

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

alguna idea de lo que podría ser mal aquí?

Gracias por las respuestas rápidas chicos! Desafortunadamente solo puede seleccionar uno.

Answer 1

Es porque Firefox agrega automáticamente tbody elementos alrededor de los elementos tr si no se suministra ninguno. Realmente no puedes usar table > tr.

Usted tiene:

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

Pero Firefox ve esto:

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

Otros elementos funcionará bien:

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

y el selector:

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

Answer 2

Hay una <tbody> elemento implícito añadió que significa lugar de:

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

el DOM en realidad contiene:

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

por ello, cambie a:

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

Usando <tbody>, <thead> y <tfoot> elementos en sus tablas es un buen hábito para entrar.

Answer 3

Sí, Doug tiene toda la razón. Solo para complementar su respuesta, tal vez sea consciente, o tal vez no, pero recuerde que jQuery atraviesa el DOM, y no el "texto" HTML que envía al navegador.

DOM es la interpretación del navegador en el HTML que usted le envía.