這是jQuery如何對待兒童選擇器的錯誤？

Question

jQuery如何處理子選擇器還是錯過了某些明顯的東西？當孩子不是*以外的任何東西時我都無法工作。

這裏是jQuery選擇我運行：

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

而且表結構是：

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

無元素與上述選擇#myTable > tr匹配。但下面列出的兩個選擇器工作正常。

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

或使用通配符匹配孩子：

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

什麼可能是錯在這裏的任何想法？

感謝您的快速答案！不幸的是只能選擇一個。

Answer 1

這是因爲Firefox自動在您的tr元素周圍添加了tbody元素（如果沒有提供）。你真的不能使用table > tr。

您有：

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

但Firefox看到這個：

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

其他因素會工作得很好：

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

和選擇：

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

Answer 2

有一個隱含的<tbody>加入的元素含義而非：

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

的DOM實際上包含：

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

所以將其更改爲：

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

使用<tbody>，<thead>和<tfoot>表中的元素是進入的好習慣。

Answer 3

是的，道格的完全正確。只是爲了補充他的答案，也許你知道，或者不知道，但請記住，jQuery遍歷DOM，而不是發送給瀏覽器的HTML「文本」。

DOM是瀏覽器對您發送的HTML的解釋。