Javascript 使用jQuery切换一大组页面项目的速度很慢

我有大约100个页面元素，我想用jQuery切换显示/隐藏。 我只使用$.toggleElementClass.toggle；这看起来是一个简单的解决方案

---

问题是这需要几秒钟，即使是在最新的Chrome浏览器上。有没有更快、更有效的方法来达到同样的效果。

根据提供的信息很难正确回答这个问题。但在这些场景中，一个非常有用的改进是尝试缩小DOM搜索上下文的范围，而不是使用$.toggleElementClass.toggle；最好使用$myelements>.toggleElementClass.toggle；将缩小jQuery查找要切换元素的位置

用提供的信息很难正确回答这个问题。但在这些场景中，一个非常有用的改进是尝试缩小DOM搜索上下文的范围，而不是使用$.toggleElementClass.toggle；最好使用$myelements>.toggleElementClass.toggle；将缩小jQuery查找要切换元素的位置

通过利用样式表在单个属性更改中设置所有显示更改的关键帧，可以减少浏览器所需的工作量 — 通常，祖先元素的类名。这意味着您可以使它们一次全部更改，而不是逐个更改，从而减少回流次数并提高速度。例如：

<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>

---

通过利用样式表在单个属性更改中设置所有显示更改的关键帧，可以减少浏览器所需的工作量 — 通常，祖先元素的类名。这意味着您可以使它们一次全部更改，而不是逐个更改，从而减少回流次数并提高速度。例如：

<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>

---

刚刚升级到jQuery 1.4.2 这使得这一切都变得无关紧要。即使是在速度较慢的IE7或IE8上。

---

它只是快多了。难以置信。

刚刚升级到jQuery 1.4.2 这使得这一切都变得无关紧要。即使是在速度较慢的IE7或IE8上。

---

它只是快多了。难以置信。

搜索dom的效率顺序是：ID、标记，然后是类。所以：$ParentContainer>element.class.toggle；搜索dom的效率顺序是：ID、标记，然后是类。所以：$ParentContainer>element.class.toggle；可能会好一点。