使用jQuery在IE8中选择HTML表格每一行的第一个TD

Question

我想找出一个 jQuery 选择器，它将为我提供 HTML 表中每一行的第一个 td。第一列，本质上。该解决方案必须在 IE8 中运行，因为很遗憾我需要支持该浏览器。

假设 HTML 表格如下所示：

<table id="tableID">
    <tr>
        <td>Cell 11</td><td>Cell 12</td><td>Cell 13</td>
    </tr>
    <tr>
        <td>Cell 21</td><td>Cell 22</td><td>Cell 23</td>
    </tr>
    <tr>
        <td>Cell 31</td><td>Cell 32</td><td>Cell 33</td>
    </tr>
</table>

因此，预期的最终结果是一个 jQuery 对象，其中仅包含包含文本“Cell 11”、“Cell 21”和“Cell 31”的 td。

还假设这个变量初始化：

var theTable = $('#tableID');

我看到的基于 jQuery 选择器的最佳解决方案是：

var firstCol = theTable.children('td:first-of-type');

但是，IE8 不支持 :first-of-type 伪类。

我尝试使用 :first-child 代替，但它似乎选择了每个 tr 中的文本节点而不是 td。我的意思是输入的 HTML 中的换行符和制表符。

显然，我可以通过像循环这样的解决方法来解决这个问题，或者通过向我正在寻找的每个 td 添加一个类或 id，但这不是重点。

Answer 1

第一个子选择器确实有效。您必须相对于 tr 元素进行查询。

var theTable = $('#tableID');
var firstCol = theTable.find('tr td:first-child');
firstCol.css('background-color', 'red');

http://jsfiddle.net/rNA6x/

Answer 2

问题在于使用 .children() 而不是 .find()。 Children 只是查看直接子项，在这种情况下，它是 IE8 决定需要为我插入的 tbody 标签。 Find 递归地搜索调用它的对象下方的整个 DOM。

var theTable = $( '#tableID' );
var firstCol = theTable.find( 'td:first-child' );
firstCol.css( 'background-color', 'red' );

我用 .find() 仔细检查了 :first-of-type，但仍然肯定会引发错误。

可以使用 .children()，但我们必须考虑到 tbody 标签：

var firstCol = theTable.children().children().children('td:first-child');

或者：

var firstCol = theTable.find('tr').children('td:first-child');