jQuery每个tr.children在Firefox 3.0中均未定义 [英] jQuery each tr.children is undefined in Firefox 3.0

问题描述

我有一段代码正在过滤表格中的行.它可以在除Firefox v3.0.x之外的所有浏览器中完美运行(与3.1 beta 2兼容).当我在Firefox 3.0.x中运行该代码段时，它表示children is undefined.我也在使用jQuery v1.2.6.

I have a snippet of code that I'm working with to filter rows in a table. It works perfectly in every browser other than Firefox v3.0.x (works fine with 3.1 beta 2). When I run the snippet in Firefox 3.0.x, it says that children is undefined. I am using jQuery v1.2.6 also.

代码段:

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测试失败，则该行将被隐藏，否则将显示该行.

The code selects all table rows and then loops through them, testing the innerHTML text of the 3rd column. If the RegEx test fails, the row is hidden, else it is displayed.

有人见过这个问题和/或知道如何使其工作吗?

Has anyone seen this issue and / or know how to get it working?

谢谢

这是表格的HTML标记.为简便起见，尽管只填充了2条记录，但我只给出了2条记录.

Here is the HTML markup for the table. For brevity, I'm only giving 2 record in it though more are populated.

<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>[e-mail]</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <th>John</th>
                <th>Doe</th>
            <th>SomeCity</th>
            <th>KY</th>
            <th>88888</th>
            <th>[e-mail]</th>
            <th>&nbsp;</th>
        </tr>
    </tbody>        
</table>

推荐答案

为什么不使用jQuery遍历DOM元素.

Why not use jQuery to traverse the DOM elements instead.

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()".

You could also use '.text()' if you just want the text without any possible markup to be returned.

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

The property children is an IE only DOM property which no other browser has (to my knowledge). Firefox uses the standard property childNodes for accessing children. The problem with childNodes is that it considers whitespace and text to be a node (or at least Firebug says so) which makes it (in my opinion) very difficult to deal with. If you have a JavaScript API, you should take advantage of it so that you don't have to deal with the differences between browsers' DOM traversal techniques.

这篇关于jQuery每个tr.children在Firefox 3.0中均未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！