使用jQuery删除类时，是否最好将该类包含在选择器中

When removing a class with jQuery, is it better to include the class in the selector?

本文关键字：包含 选择器 删除 jQuery 是否 使用      更新时间：2023-09-26

这可能不会导致任何明显的性能差异，但我只是感兴趣。如果我使用jQuery删除元素列表中的一个类，那么在选择器中包含该类是更好的做法还是更好的性能？

所以要么包括它：

$('#myList li.classToRemove').removeClass('classToRemove');

或者不包括：

$('#myList li').removeClass('classToRemove');

因此，基本上，在选择器和removeClass方法中缩小列表有什么区别。

选择器向后匹配（从最后到第一），这意味着它将首先找到"具有"classToRemove"的所有元素，这些元素也是"li"，它们也是"#mylist"的子元素"。

这样做是为了尽可能、尽可能快地缩小名单。

因此，你应该选择

$('#myList li.classToRemove').removeClass('classToRemove');

更少的匹配项意味着更快、更高效的脚本。

假设不是所有的<li>元素都有那个类，那么我认为最好在过滤集上运行.removeClass()。

但总的来说，还会有其他事情对表现产生影响，比如。。。

  • '#myList li'与'#myList li.classToRemove' 匹配的元素数量

  • 不同环境优化DOM选择的方式

  • 不同环境之间.removeClass()方法内部的实际性能差异

因此，除非您讨论的是在大量元素上不必要地运行.removeClass()，否则我不会太担心。

使用更具体的选择器将提高性能，但不会影响.removeClass（）.的结果

把每一个添加到选择器中的操作都想象成向下钻取。给定以下html：

    <div id="myList">
        <ul>
            <li id="li1"></li>
            <li id="li2"></li>
            <li id="li3" class="classToRemove"></li>
        </ul>
    </div>
    //In order of fastest to slowest:
    //Selecting the exact li and calling removeClass once
    $('#li3').removeClass('classToRemove');
    //In this one we are skipping 2 li's and then calling removeClass once
    $('#myList li.classToRemove').removeClass('classToRemove');
    //In this one we have to call removeClass 3 times
    $('#myList li').removeClass('classToRemove');

很抱歉撞到了一篇旧帖子。

这个页面上的测试似乎表明，不包括类选择器大约快10-15%。所以，如果你想使用jQuery，最好的方法就是：

$('#myList li').removeClass('classToRemove');
  • 注意-此页面似乎使用了jQuery 1
相关文章：