Firefox 3.0 中未定义 jQuery 每个 tr.children

Question

我正在使用一个 sn-p 代码来过滤表中的行。它在除 Firefox v3.0.x 之外的所有浏览器中都能完美运行（适用于 3.1 beta 2）。当我在 Firefox 3.0.x 中运行 sn-p 时，它会显示 children is undefined。我也在使用 jQuery v1.2.6。

代码片段：

var bodyRows = $("#resultsTable tbody tr");
bodyRows.each(function(n){
    if(!filterPattern.test($.trim(this.children[2].innerHTML))){ //errors here
            this.style.display = 'none';
    }
    else {
            this.style.display = '';
    }
});

代码选择所有表格行，然后循环遍历它们，测试第 3 列的 innerHTML 文本。如果 RegEx 测试失败，则隐藏该行，否则显示该行。

有没有人看到这个问题和/或知道如何让它工作？

谢谢

编辑： 这是表格的 HTML 标记。为简洁起见，我只提供了 2 条记录，尽管更多记录。

<table id="resultsTable" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>First</th>
                <th>Last</th>
            <th>City</th>
            <th>State</th>
            <th>Zip</th>
            <th>Email</th>
            <th>&nbsp;</th>
        </tr>
    </thead>    
    <tbody id="resultsBody">
        <tr>
            <th>James</th>
                <th>Eggers</th>
            <th>SomeCity</th>
            <th>IA</th>
            <th>55555</th>
            <th>email@email.com</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <th>John</th>
                <th>Doe</th>
            <th>SomeCity</th>
            <th>KY</th>
            <th>88888</th>
            <th>email2@email.com</th>
            <th>&nbsp;</th>
        </tr>
    </tbody>        
</table>

Answer 1

为什么不使用 jQuery 来遍历 DOM 元素呢。

var bodyRows = $("#resultsTable tbody tr");
bodyRows.each(function(){
    var thirdCell = $(this).find('td').eq(2);
    if(!filterPattern.test($.trim(thirdCell.html()))){
        this.style.display = 'none';
    } else {
        this.style.display = '';
    }
});

如果您只想返回没有任何可能标记的文本，也可以使用“.text()”。

children 属性是仅 IE 的 DOM 属性，其他浏览器没有（据我所知）。 Firefox 使用标准属性childNodes 来访问孩子。 childNodes 的问题在于它认为空格和文本是一个节点（或者至少 Firebug 是这样说的），这使得它（在我看来）非常难以处理。如果你有 JavaScript API，你应该利用它，这样你就不必处理浏览器的 DOM 遍历技术之间的差异。

Answer 2

if(!filterPattern.test($.trim(this.children[2].innerHTML)))

当一个 'each' 回调被 jQuery 调用时，'this' 是一个直接的浏览器 DOM 节点，而不是一个 jQuery 对象。

之所以出现混淆是因为 jQuery 在其 DOM 包装器上提供了一个“children”方法，而 IE 在其原生 DOM 节点上提供了一个非标准的“children”集合，但是这两个接口几乎完全不兼容。

所以对于 jQuery 版本使用 $(this).children()[2] 或类似的，或者对于标准 DOM 版本使用 this.getElementsByTagName('td')[2]。

（假设您打算将表格数据元素设置为“td”而不是“th”，您可能已经这样做了。另外，您可能想要获取单元格的原始文本，而不是可能有字符转义的 innerHTML 版本意想不到的方式。）

Answer 3

在尝试访问第 3 个元素之前，您可能需要检查子元素的数量。

Answer 4

您是否明确添加了一个

<tbody>
   ...
</tbody>

标记到您的表？如果没有，我会说从以下位置删除“tbody”部分：$("#resultsTable tbody tr");

只需 $("#resultsTable tr");

我很好奇这个版本的 Firefox 是否没有为你隐式创建它。