针对唯一元素优化 jQuery 过滤器答案

【问题标题】：Optimise jQuery filter for unique elements针对唯一元素优化 jQuery 过滤器
【发布时间】：2013-08-06 11:10:02
【问题描述】：

我有一个元素集合，虽然每个有一个唯一的字符串标识符，我不能安全地将它的值用作元素 ID 因为我不能保证它只会包含valid characters。因此，我将标识符存储在每个元素 jQuery .data() 对象中。虽然我可以使用data- 属性，但我不太喜欢在可能不得不转义引号等的地方使用选择器的想法，但如果有巨大的效率奖励，则应该考虑到这一点。使用.data() 对象的解决方案也很棒，因为它适用于任何数据类型。

我想知道选择单个元素的最有效方法是什么。目前，这是我的解决方案：

function get_group($from, group) {
  var $result = $();
  $from.each(function() {
    if($(this).data("group") == group) {
      result = $(this);
      return false;
    }
  });
  return $result;
}

我会遍历每个结果，直到找到匹配项。当我这样做时，我会打破循环。通过将$result 初始化为一个空的jQuery 对象，我将始终返回jQuery，我认为这与标准实践最为一致，尤其是.filter() 方法。

我认为这比使用带有函数的.filter() 更好，因为它显式返回单个（或没有）项目，并在需要时立即停止迭代，但是有更好的方法吗？强>

【问题讨论】：

您是否动态创建这些元素？或者您对它们的创建和附加到页面有任何控制吗？
如果您的数据不包含引号（单引号或双引号），为什么不使用数据组属性？

标签： optimization jquery jquery-data jquery-filter

【解决方案1】：

似乎for 循环比你所拥有的更快：

function get_group ($from, group)
    for (var i = 0; i < $from.length; i++) {
        if ($($from[i]).data("group") == group) {
            return $($from[i]);
        }
    }
    return $();
}

JSPerf：http://jsperf.com/each-vs-data-selector

编辑：重写为函数，添加了 return $()

【讨论】：

谢谢，但我没有使用 HTML5 data- 属性，我使用的是 jQuery data() 对象的属性。然而，看看你的测试，这似乎是一个很好的解决方案——你真的需要在 jQuery 中包装 $from[i] 吗？此外，如果您未能成功完成循环，则需要返回 $()。
是的，我知道你不是。我添加了测试，因为一些答案表明这将是最快的解决方案。至于在 jQuery 中包装 $from[i] 是必要的，因为 $from[i] 不是 jQuery 对象。我已经添加了一个使用 .eq(i) 的示例，但是那个示例比较慢。
这是最好的答案，很抱歉花了这么长时间才得到认可。

【解决方案2】：

正如你所说，如果每个数据组都是唯一的，你可以这样做 -

$('[data-group="'+group+'"]')

【讨论】：

我不喜欢这种方法，因为将未知字符串附加到 jQuery 选择器中似乎不明智（尤其是因为引用问题）

【解决方案3】：

$from.find('[data-group="' + group + '"]')

【讨论】：

我不喜欢这种方法，因为将未知字符串附加到 jQuery 选择器中似乎不明智（尤其是因为引用问题）
同意，但是这种方法使代码紧凑且可读，并且 jQuery 具有故障安全机制，如果选择器不匹配任何内容，则返回空数组。如果给定的 sting 破坏了 JS 语法，就会出现问题。我想这个决定将取决于实际文本是由程序（相当安全）还是用户（可能不安全）提供的。
虽然很优雅，但比制作简单的 for 循环慢了将近 60%。
性能与代码清晰度的权衡。但问题是“优化”，所以尼克拉斯 +1 ;)