jQuery 选择器性能

Question

我对选择器性能有一些疑问。

这是我的标记(简化(。子div 将具有两个可能的类之一("播放列表未选择"或"播放列表选择"(。

<div class="wrapper">
    <div class="playlist-non-selected"></div>
    <div class="playlist-selected"></div>
    <div class="playlist-non-selected"></div>
    <div class="playlist-non-selected"></div>
</div>

1.如果我想选择包装器div 的所有直接子级并对每个子级执行操作，我会使用它吗？

wrapper.find('div.playlist-non-selected, div.playlist-selected').each(function(){
});       

阿拉伯数字。如果我想选择特定项目，我会使用它吗？

wrapper.children('div.playlist-non-selected, div.playlist-selected').eq(2);

或：

wrapper.find('div.playlist-non-selected, div.playlist-selected').eq(2);

或：

wrapper.children('div').eq(2);

这些选择器有效，但我想知道它们的效率如何？

Answer 1

jquery 选择器功能强大，我发现理解它们的最好方法是简单地像你一样设置代码，然后在浏览器的 javascript 控制台中播放，看看什么有效。

您

还需要根据您设计代码的方式来考虑您尝试执行的操作。

在第一种情况下，看起来您只是选择了div.wrapper 的所有子级。 所以你只会说$('div.wrapper').children()

我不希望看到你有一个像"2"这样的硬编码数字卡在那里。 它可能有效，但您的代码将非常脆弱。 而是用类标记特定项目，然后搜索该类。

就效率而言。 这一切都非常快，我建议不要担心。 让代码工作，写好它，然后担心速度是否有问题

Answer 2

find(( 和 children(( 方法都用于过滤匹配元素的子元素，除了前者是向下移动任意级别，后者是向下移动一个级别。

find() – 深入到任何数字，搜索匹配的元素。

children() – 它只是在匹配元素的基础上降低一级。

因此，如果find和children返回相同的结果集，那么children将执行相同或更少的比较次数。

将

第三个与第二个进行比较，越精确的选择器效率越高，因为它将限制比较的数量。

所以在所有三秒中，是 mose 高效选择器。