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 3-го столбца. Если тест RegEx не пройден, строка скрыта, иначе она отображается.

Кто-нибудь видел эту проблему и / или знает, как заставить ее работать?

Спасибо

EDIT: Вот разметка 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 является свойством DOM только для IE, которого нет у других браузеров (насколько мне известно). Firefox использует стандартное свойство childNodes для доступа к детям. Проблема с childNodes состоит в том, что он рассматривает пробел и текст как узел (или, по крайней мере, так говорит Firebug), что делает его (на мой взгляд) очень сложным для работы. Если у вас есть JavaScript API, вы должны воспользоваться этим, чтобы вам не приходилось сталкиваться с различиями в методах обхода DOM в браузерах.

Answer 2

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

Когда jQuery вызывает 'каждый' обратный вызов, 'this' - это прямой DOM-узел браузера, а не объект jQuery.

Путаница возникает из-за того, что jQuery предлагает метод 'children' для своих оболочек DOM, а IE предлагает нестандартную коллекцию 'children' на своих нативных узлах DOM, но эти два интерфейса практически полностью несовместимы.

Так что используйте $ (this) .children () [2] или подобное для версии jQuery, или this.getElementsByTagName ('td') [2] для стандартной версии DOM.

(Предполагая, что вы хотели сделать элементы данных таблицы 'td', а не 'th', что вы, вероятно, и сделали. Также вы, вероятно, хотите получить необработанный текст ячейки, а не версию innerHTML, в которой символы могут экранироваться неожиданные пути.)

Answer 3

Вы явно добавляете

<tbody>
   ...
</tbody>

тег на вашем столе? Если нет, я бы сказал, что нужно удалить часть 'tbody' из: $ ("# resultsTable tbody tr");

до $ ("# resultsTable tr");

Мне любопытно, если эта версия Firefox не создает ее для вас.

Answer 4

вы можете проверить количество элементов в дочерних элементах, прежде чем пытаться получить доступ к третьему элементу.