为什么 $('#table > tr') 选择器不匹配？（总是返回 0）答案

【问题标题】：Why does $('#table > tr') selector not match? (always return 0)为什么 $('#table > tr') 选择器不匹配？（总是返回 0）
【发布时间】：2012-05-06 15:56:07
【问题描述】：

html代码：

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

带有jquery的js代码：

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

结果：

0,1

为什么第一个#table > tr 得到0？

您可以从这里观看现场演示：http://jsfiddle.net/Freewind/PmsFQ/

【问题讨论】：

如果有必要，请转到 other 问题并为此关闭它（这个问题写得更好，更重要）。
@pst：完成。知道详细描述说“这与早期问题相同”总是让我有点不安，但我认为在这种情况下没关系。

标签： jquery jquery-selectors

【解决方案1】：

因为<table> 的直接子代只能是<thead>、<tbody> 或<tfoot>（或<colgroup> 或<caption>，但它们不包含行）。

浏览器的 DOM 将在 <tbody> 中隐式包装流浪的 <tr>s。（对于不这样做的浏览器，jQuery 会伪造它）

你需要写$('#table > tbody > tr')。

【讨论】：

第二句话适用于 HTML（以及 HTML5），但不适用于 XHTML。见these 两个answers。

【解决方案2】：

这是因为浏览器会自动在您的<table> 和<tr> 之间插入<tbody> 元素，这样这些行就不再是您的表的直接子元素了。

【讨论】：

【解决方案3】：

您的浏览器正在添加 tbody 元素，因此 tr 不是表的子元素。

【讨论】：

他们仍然是桌子的直系后代......只是不是它的孩子:-)
@Codemonkey 这就是我所说的“直接后代”的意思。但是，是的，孩子更好。
@Codemonkey: "direct descendant" is the same as "child"...
@BoltClock 也许在编程中，但在所有参考文献中，我能找到“直系后代”只是意味着遵循一条直线的血统路径，例如我是祖父的直系后裔