jQuery.toggle（）在許多<TR>元素極其緩慢

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

有近800列，其中大部分類的。現在我想切換這樣的這些行：

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

但是這確實是極其緩慢的，大部分瀏覽器想要停止行動的時候了。

有沒有人有一個想法如何使這個東西更快和可用？

2010-12-20 adnek

似乎因爲jQuery類名搜索元素..

注：類選擇是jQuery中的最慢的選擇之中;在IE中，它通過整個DOM循環遍歷整個DOM。儘可能避免使用。

還要檢查this文章

2010-12-20 10:53:54

這真的不是問題，它是表的迴流:) – 2010-12-20 10:55:58

是啊我知道，但如何調用多行而不是類？ – adnek 2010-12-20 10:57:12

你可以使用每個語句，並綁定一次document.ready。但一些經驗豐富的人建議更換桌子。 – 2010-12-20 10:59:22

，如果你不顯示錶格數據不要使用表格。

當你有非常大的表格時（由於渲染表格的複雜性），瀏覽器速度很慢。這種變化會發生很多回流。

2010-12-20 10:54:54 Oded

實際上我使用的是真正的表格數據，所以沒有解決方法 – adnek 2010-12-20 10:56:41

@adenk - 考慮更小的表格。 800行不方便用戶，也許更有活力的方法會有所幫助。一次顯示40行，添加分頁，可能使用AJAX填充表格。 – Oded 2010-12-20 10:58:07

不使用表格結構，而是使用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>

現在您可以在其上編寫選擇器。這肯定是一個進步

2010-12-20 11:45:56 Karan

我也有類似的問題，但有幾行字，約200

我用.hide（）和.show（），現在這幾乎是瞬間的。

2013-07-24 21:02:16 Richard

此解決方案完美運行，並且允許我避免不必改變表格佈局（它是表格數據）。 – Susan 2013-10-04 08:48:21

也適合我。我猜toggle（）使用更多的處理，一個簡單的switch語句。 – 2013-10-15 07:08:25

回答