jQuery.toggle（）在很多元素上都非常慢

Question

我有一张这样的表：

<table>
    <tr class="a"><td></td></tr>
    <tr class="b"><td></td></tr>
</table>

有近800行，其中大部分属于a类。现在我想像这样切换这些行：

    $("#toggle_a").click(function(){
        $("tr.a").toggle();
    });
    $("#toggle_b").click(function(){
        $("tr.b").toggle();
    });

但这真的非常缓慢，而且大多数时候浏览器都希望停止此操作。

有人知道如何让这件事更快更有用吗？

Answer 1

似乎因为jquery按类名搜索元素..

  

注意：类选择器是其中之一   jQuery中最慢的选择器;在IE中它   遍历整个DOM。避免   尽可能使用它。

另请查看this文章

Answer 2

我有一个类似的问题，但几行，大约200。

我使用了.hide（）和.show（），现在几乎是瞬间完成的。

Answer 3

如果您没有显示表格数据，请不要使用表格。

当你有非常大的表时（由于渲染表的复杂性），浏览器的速度非常慢。这种变化会发生很多回流。

Answer 4

不使用表结构，而是使用LI标记。它将加快html渲染过程。

<UL style="padding: 0; list-style-type: none;">
    <LI class="a">1</LI>
    <LI class="b">2</LI>
    <LI>3</LI>
    <LI>4</LI>
</UL>

现在您可以在此处编写选择器。这绝对是一种改进