jQuery 改进表迭代器

Question

>我有一个表格，每行包含一个单元格，里面是该复选框的复选框和标签。

我试图做的是根据输入的文本隐藏行。

基本上这是名称列表，我想过滤/隐藏那些不包含输入文本的名称。

这是我的函数：

$(function () {
$('#user_name').keyup(function () {
    if ($.trim($('input#user_name').val()) == '') {
        $('table.myList >tbody >tr').each(function (index, value) {
            $(this).css("display", "block");
        });
    } else {
        $('table.myList >tbody >tr').each(function (index, value) {
            if ($(this).find('td > label').length > 0) {
                if ($(this).find('td > label').html().toLowerCase().indexOf($.trim($('input#user_name').val()).toLowerCase()) >= 0) {
                    $(this).css("display", "block");
                } else {
                    $(this).css("display", "none");
                }
            }
        });
    }
});
});

如果我的表有 40 条记录，这段代码可以快速运行，但是当我将列表增加到 500 时，它会变慢并在一段时间后使我的浏览器崩溃。

我正在寻找一种改进此代码以使其更快地工作的方法。

这是模型代码的链接：http://jsfiddle.net/gGxcS/

==更新==

以下是我基于@scessor和@nnnnnn答案的最终解决方案：

$(function () {
var $tableRows = $('table.myList tr');
var lastInput = '';
$('#user_name').keyup(function () {
    var sValue = $.trim($('input#user_name').val());
    if(lastInput==sValue) return;
    if (sValue == '') {
        $tableRows.show();
    } else {
        $tableRows.each(function () {
            var oLabel = $(this).find('label');
            if (oLabel.length > 0) {
                if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            }
        });
        lastInput=sValue;
    }
});
$('img.removeSelections').click(function () {
    $('table.myList input[type="checkbox"]').prop("checked", false);
})
});

Answer 1

你能测试这个代码（有很多元素）吗？

$(function () {
    $('#user_name').keyup(function () {
        var sValue = $.trim($('input#user_name').val());
        if (sValue == '') {
            $('table.myList tr').show();
        } else {
            $('table.myList tr').each(function() {
                var jThis = $(this);
                var oLabel = jThis.find('label');
                if (oLabel.length > 0) {
                    if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
                        jThis.show();
                    } else {
                        jThis.hide();
                    }
                }
            });
        }
    });
});

• 不要两次调用具有相同参数的函数（例如 $.trim($('input#user_name').val()); ）。
• 使用短选择器。
• 仅在必要时使用jquery（例如，这里不需要：$('table.myList >tbody >tr').each(function (index, value) {）。

=== 更新 ===

如果有人将退格键保留为长，它将一次又一次地设置所有tr可见。为了防止这种情况，您可以检查最后一个值是否等于当前值。如果为真，则什么都不做。

=== 更新 ===

要取消选中所有复选框，这取决于您的jQuery版本。

使用 jQuery 1.6 及更高版本：

$('table.myList input[type="checkbox"]').prop("checked", false);以前：
$('table.myList input[type="checkbox"]').attr("checked", false);

Answer 2

我建议你缓存你的jQuery对象 - 鉴于你想在每次击键时处理，我会在keyup处理程序之外缓存表行对象。此外，当您可以在外部调用一次函数时，不要在 .each() 循环内调用函数 - 例如，无需在每次.each()迭代中调用$.trim($('input#user_name').val()).toLowerCase()。

$(function () {
    var $tableRows = $('table.myList >tbody >tr');
    $('#user_name').keyup(function () {
        var searchStr = $.trim($('input#user_name').val()).toLowerCase();
        if (searchStr === '') {
            $tableRows.css("display", "block");
        } else {
            $tableRows.each(function (index, value) {
                var $this = $(this),
                    $label =$this.find('td > label');
                if ($label.length > 0) {
                    if ($label.html().toLowerCase().indexOf(searchStr) >= 0) {
                        $this.css("display", "block");
                    } else {
                        $this.css("display", "none");
                    }
                }
            });
        }
    });
});

演示：http://jsfiddle.net/gGxcS/3/