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

Question

我正在使用一段代码来过滤表中的行。 它在除 Firefox v3.0.x 之外的所有浏览器中都能完美运行（在 3.1 beta 2 中也能正常运行）。 当我在 Firefox 3.0.x 中运行该代码片段时，它显示 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 = '';
    }
});

该代码选择所有表格行，然后循环遍历它们，测试第三列的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 protected]</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <th>John</th>
                <th>Doe</th>
            <th>SomeCity</th>
            <th>KY</th>
            <th>88888</th>
            <th>[email protected]</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)))

当 jQuery 调用“each”回调时，“this”是直接浏览器 DOM 节点，而不是 jQuery 对象。

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

因此，对于 jQuery 版本，请使用 $(this).children()[2] 或类似内容，对于标准 DOM 版本，请使用 this.getElementsByTagName('td')[2] 。

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

Answer 3

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

Answer 4

您是否明确地将

<tbody>
   ...
</tbody>

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

只是 $("#resultsTable tr");

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