Question

我有一个＆＃34;实时搜索＆＃34;搜索HTML table并根据搜索查询显示/隐藏的框。

这适用于较小的表格，但随着表格数据的增长，搜索变得极其缓慢。

我的代码：

   $("#search").keyup(function() {
        var raderna = $("#history tbody tr");
        var value = this.value.toLowerCase().trim();
           if(value.length == 0) {

              raderna.each(function(index) {
            if (index !== 0) {
                $row = $(this);
                    if($row.hasClass("hiddenRow")) {
                        $row.hide();
                    } else {
                        $row.show();
                    }
                }
          });

              return false;
       }
        raderna.each(function (index) {
            $(this).find("td").each(function () {
                var id = $(this).text().toLowerCase().trim();
                var not_found = (id.indexOf(value) == -1);
                $(this).closest('tr').toggle(!not_found);
                return not_found;
            });
        });
    });

我能做些什么来加快速度？

Answer 1

将var raderna = $("#history tbody tr");置于您的keyup事件之上。对于每个keyup事件，您都在查找#history tbody tr的DOM，因此它有很多无用的工作要做。您可以在页面加载时执行此操作一次并将其保留在该变量中。
您可以将班级hiddenRow设为display: none，而不是拨打$row.hide()和$row.show()，$row.addClass()或removeClass()。添加或删除类比显示或隐藏元素更快捷。或者你甚至可以使用toggleClass（）。

每个：

$(this).find("td").each(function () {
    var id = $(this).text().toLowerCase().trim();
    var not_found = (id.indexOf(value) == -1);
    $(this).closest('tr').toggle(!not_found);
    return not_found;
});

如果你这样写，

可以更快：

$(this).find('td').each(function() {
    var $this = $(this),
        id = $this.text().toLowerCase(),
        not_found = (id.indexOf(value) == -1);
    $this.closest('tr').toggle(!not_found);
    return not_found;
});

在我写作的时候，我看到@Tyranicangel评论了你的问题，我认为他的建议都很好。我只提供了一些改进代码性能的小技巧。

jQuery $每个都很慢

1 个答案: