最合适的方法:$($(".answer")[0])

Question

假设我想要获得该类的所有元素中的第一个元素".answer"

$($(".answer")[0])

我可以做到这一点,但优雅和速度之间的最佳平衡是什么？

*改变了问题以反映当前的讨论

Answer 1

我不能说优雅的方面,但这里的表现方面实际上可以产生巨大的差异.

它看起来像,从一组JavaScript的测试,你原来的方法实际上是最高效的,并且违背了假设到了接受的答案挂,非CSS灒选择往往是多比方法选择效率较低.这是有原因的.所述$('.answer')可以使用浏览器的本地getElementsByClass(),而不必手动遍历的结果.该:first选择那个复杂.在这种情况下,使用嘶嘶声选择器似乎会使选择速度减慢4-5倍.

我认为,使用jQuery,性能应该胜过优雅,所有证据(到目前为止我测试的每一个浏览器!)似乎都表明OP的优雅解决方案是最快的.

以下是测试运行次数最多的浏览器的结果:

(这些数字是'每秒操作数',所以数字越高,数字越慢.)

Answer 2

以下都是功能相同的(虽然不是速度):

• var a0 = $($('.answer')[0]);
• var a0 = $('.answer').first();- 见http://api.jquery.com/first/
• var a0 = $('.answer:first');- 见http://api.jquery.com/first-selector/
• var a0 = $('.answer').eq(0);- 见http://api.jquery.com/eq/
• var a0 = $('.answer:eq(0)');- 请参阅http://api.jquery.com/eq-selector/

哪个最好？
它已经假定了选择的版本应该比法版本快(和逻辑有一定的道理),但我还没有找到一个可靠的跨浏览器,多文档基准,证明这是真的.

在某些情况下,你不能使用选择器,因为你有一个由链式结果产生的jQuery对象,并且必须在以后削减它.

编辑:根据以下@ yc测试的优秀信息,以下是当前(2011年2月4日)的测试结果,总结并与以下基线进行比较.answer:first:

          :first  :eq(0)  .first()  .eq(0)  $($('...')[0])
Chrome 8+   100%     92%      224%    266%       367%
   FF 3.6   100%    100%      277%    270%       309%
  FF 4.0b   100%    103%      537%    521%       643%
 Safari 5   100%     93%      349%    352%       467%
 Opera 11   100%    103%      373%    374%       465%
     IE 8   100%    101%     1130%   1246%      1767%
 iPhone 4   100%     95%      269%    316%       403%
=====================================================
 Weighted   100%     92%      286%    295%       405%
    Major   100%     95%      258%    280%       366%

• 的加权线示出了由每个浏览器测试的数量加权的性能; 流行的浏览器(在那些测试中)被更强烈地计算.
• 在主要线路显示相同的,只包括主要的桌面浏览器的非测试版.

总之:假设(目前)是错误的.这些方法明显快于Sizzle选择器,几乎没有例外,OP的代码$($('.answer')[0])是最快的!

Answer 3

使用:first选择器或.first过滤方法:

$(".answer:first");

要么:

$(".answer").first();