Tại sao bộ chọn $ ('# table> tr') không khớp? (Luôn luôn trở về 0)

Question

Mã html:

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

Mã js với jquery:

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

Kết quả:

0,1 

Tại sao #table > tr đầu tiên nhận được 0?

Bạn có thể thấy một bản demo trực tiếp từ đây: http://jsfiddle.net/Freewind/PmsFQ/

Answer 1

Bởi vì trẻ em trực tiếp của một <table> chỉ có thể là <thead>, <tbody>, hoặc <tfoot> (hoặc <colgroup> hoặc <caption>, nhưng những người không chứa hàng).

DOM của trình duyệt sẽ ẩn hoàn toàn đi lạc <tr> s trong một <tbody>. (đối với các trình duyệt không thực hiện việc này, jQuery sẽ thay thế nó)

Bạn cần phải viết $('#table > tbody > tr').

Answer 2

Điều này là do trình duyệt tự động chèn phần tử <tbody> giữa <table> và <tr> của bạn, sao cho các hàng không còn là con trực tiếp trong bảng của bạn nữa.

Answer 3

Trình duyệt của bạn đang thêm yếu tố tbody để tr không phải là con của bảng.