优化jQuery的过滤器独特的元素

我有元素的集合，并且而每个有唯一的字符串标识，我不能放心地使用它的值作为元素ID，因为我不能保证它将只包含valid characters。因此，我将标识符存储在每个元素jQuery .data()对象中。虽然我可以使用data-属性，但我不太喜欢使用可能需要避免引号等选择器的想法，但如果存在巨大的效率奖励，则应将其考虑在内。使用.data()对象的解决方案也会很棒，因为这可能适用于任何数据类型。优化jQuery的过滤器独特的元素

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

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()带有一个函数更好，因为它明确地返回一个（或不是）项目，并在需要时立即停止迭代，但有没有更好的方法？

来源

2013-08-06 Ian Clark

您是否动态创建这些元素？或者你有任何控制他们的创作和追加到页面？ –

如果您的数据不包含引号（单或双），为什么不使用数据组属性？ –

这似乎是一个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

编辑：改写为功能，添加回报$（）

来源

2013-08-06 12:11:56

谢谢，但我没有使用HTML5'data-'属性，我使用jQuery'data（）'对象的属性。然而，看着你的测试，这似乎是一个非常好的解决方案 - 你真的需要将'$ from [i]'包装到jQuery中吗？另外，如果完成循环失败，则需要返回'$（）'。 –

是的，我知道你不是。我添加了测试，因为一些答案表明这将是最快的解决方案。至于将'$ from [i]'包装到jQuery中，这是必要的，因为'$ from [i]'不是一个jQuery对象。我已经添加了一个使用'.eq（i）'的例子，但是那个比较慢。 –

嗯有趣，感谢您的意见！ :) –

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

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

来源

2013-08-06 11:14:31

我不喜欢这种方法作为将未知字符串附加到jQuery选择器似乎不明智（至少因为引用问题） –

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

来源

2013-08-06 11:16:14 Samy

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

同意，但这种方法使代码紧凑和可读，jQuery有一个故障安全机制，如果选择器什么都不匹配，它将返回一个空数组。如果给定的sting会破坏JS语法，则会出现问题。我猜这个决定取决于实际文本是由程序（相当安全）还是由用户（可能不安全）提供。 – Samy

虽然优雅，但比简单的循环慢了近60％。 –

优化jQuery的过滤器独特的元素

回答

相关问题