Question

我有一大堆（大约100个）页面元素，我想用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

刚刚升级到jQuery 1.4.2 它使这一切都无关紧要。即使是“慢”的IE7或IE8。只是那么多更快。难以置信的。

使用jQuery切换大量页面项目很慢

3 个答案: