用jQuery切換一大組頁面項目很慢

Question

我有一大組頁面元素（我想用jQuery切換（顯示/隱藏））。 我只是使用$(".toggleElementClass").toggle();這看起來像一個簡單的解決方案。

問題是，這需要幾秒鐘，即使在最新的Chrome瀏覽器。有沒有更快，更有效的方法來達到同樣的效果。

Answer 1

您可以通過利用樣式表將單個屬性更改中的所有顯示更改（通常爲祖先元素的類名）鍵入，從而減少瀏覽器必須執行的工作量。這意味着你可以讓他們全部一次而不是一個一個地改變，減少迴流次數並提高速度。例如：

<style type="text/css"> 
    #mything p.toggled { display: none; } 
    #mything.toggled p { display: none; } 
    #mything.toggled p.toggled { display: block; } 
</style> 

<div id="mything"> 
    <p> foo </p> 
    <p> bar </p> 
    <p> bof </p> 
    <p> zot </p> 
</div> 

<button id="toggle-all">all</button> 

<script type="text/javascript"> 
    $('#mything>p').click(function() { 
     $(this).toggleClass('toggled'); 
    }); 
    $('#toggle-all').click(function() { 
     $('#mything').toggleClass('toggled'); 
    }); 
</script> 

Answer 2

很難用所提供的信息正確回答這個問題。但是在這些場景中有很大幫助的一個改進是儘量縮小DOM搜索範圍，而不是使用$(".toggleElementClass").toggle();，它更好地使用$("#myelements > .toggleElementClass").toggle();將縮小jQuery查找要切換的元素的範圍。

Answer 3

剛剛升級到1.4.2的jQuery它 做這一切問題無關。即使在一個「慢」IE7或IE8。 它只是這麼多更快。難以置信的。