Why does $('#table > tr') selector not match? (always return 0)

Question

The html code:

<table id='table'>
    <tr>
        <td>..</td>
    </tr>
</table>

The js code with jquery:

var l1 = $('#table > tr').length;
var l2 = $('#table tr').length;
alert(l1+','+l2);​

The result:

 0,1

Why the first #table > tr get 0?

You can see a live demo from here: http://jsfiddle.net/Freewind/PmsFQ/

Answer 1

Because the direct children of a <table> can only be <thead>, <tbody>, or <tfoot> (or <colgroup> or <caption>, but those don't contain rows).

The browser's DOM will implicitly wrap stray <tr>s in a <tbody>. (for browsers that don't do this, jQuery fakes it instead)

You need to write $('#table > tbody > tr').

Answer 2

This is because browsers automatically insert the <tbody> element between your <table> and <tr>, such that the rows are no longer the direct children of your table.