1

我了解如何根据使用 jQuery 的 hide() 和 show() 的选择来切换表格中的 tr。这曾经在几百行的情况下非常有效。现在，我需要它来处理 DOM 中的 5000 多个条目。它完全冻结了浏览器。

我的搜索把我带到了 learningjquery.com这里

其中解释了一个“启用/禁用样式表”方法，它应该像一个魅力一样工作。它确实如此，除了它只在 IE9 上像魅力一样工作，只需要一秒钟（如果那样的话）来过滤行。在 chrome 上，相同的操作需要 15-20 秒。

我的问题是 Chrome 被正在为其构建此应用程序的人广泛使用。有人可以建议我如何使这个解决方案在 Chrome 中工作，或者建议其他方法来处理这种情况。

  1. 我尝试过其他选项，例如 .css('display', 'none')、.addClass() 和 .removeClass() 等。似乎没有什么能让它变得更快。
  2. 我尝试过数据表，虽然之后速度很快，但最初加载这么多数据需要很长时间。

更新：非常感谢@jfriend00 和@Ohgodwhy。这是我拥有的适用于所有浏览器的最终代码。

$('#tbl_product_details tbody tr').each( function() {
    var row = $(this);
    row.hasClass("tr_"+cust_id) ? row.removeClass("hide") : row.addClass("hide");
});

虽然，正如公认的答案所示，它可以通过纯 js 进一步改进，并且通过在页面加载时获取 dom 元素，我不需要这样做。代码已经足够快了，我宁愿到处都有 jQuery 代码。

4

1 回答 1

0

根据您的评论，听起来您只想显示具有类的tr_+custom_id行并隐藏所有其他行。

此处性能的关键将确保您在每个操作中迭代所有行不超过一次。现在，您在每个操作中至少执行两次。而且，您甚至可以通过在页面加载时迭代一次并在 javascript 中构建索引来加快搜索速度，这比通过 DOM 迭代要快得多。

作为第一个简化，您可以替换这两个通过方案：

$('#tbl_product_details tbody tr:not(.special_hide)').addClass('special_hide');
$('#tbl_product_details tbody tr.tr_'+cust_id+'').removeClass('special_hide');

有了这个单程方案：

var custRow = "tr_"+cust_id;
$('#tbl_product_details tbody tr').each(function() {
    var item = $(this);
    if (this.className.indexOf(custRow) != -1) {
        item.removeClass("special_hide");
    } else if (this.className.indexOf("special_hide") == -1) {
        item.addClass("special_hide");
    }
});

如果行本身没有改变，您可以在页面加载后将行列表预加载到持久变量中一次：

var rowList = $('#tbl_product_details tbody tr');

然后，使用这个 JS：

var custRow = "tr_"+cust_id;
rowList.each(function() {
    var item = $(this);
    if (this.className.indexOf(custRow) != -1) {
        item.removeClass("special_hide");
    } else if (this.className.indexOf("special_hide") == -1) {
        item.addClass("special_hide");
    }
});

它可以通过删除 jQuery 并替换一些不太通用的纯 javascript 代码来加快速度。

它可以通过在 javascript 中保留当前显示的行以及哪些行是给定 id 的索引来进一步加快速度，这样您就可以直接对需要操作的行进行操作，而无需检查每一行和每个类名。这样做可能会非常快。

于 2012-10-30T06:17:16.497 回答