jquery - 哪种 jQuery 选择效率更高？

Question

哪组选择器效率更高？

1

$('#parent_element span.class1').do_something1();
$('#parent_element span.class2').do_something2();
$('#parent_element span.class3').do_something3();
$('#parent_element span.class4').do_something4();

2

$parent_element = $('#parent_element'); 
$parent_element.find('span.class1').do_something1();
$parent_element.find('span.class2').do_something2();
$parent_element.find('span.class3').do_something3();
$parent_element.find('span.class4').do_something4();

我的猜测是 #2 更有效，因为它开始搜索 find() 重点关注父元素而不是整个 DOM。这是真的吗？

如果是这样，需要多少次调用该父元素才能使其比 #1 更高效？

谢谢!

Answer 1

解决方案#2 的效率要高得多。在 jQuery 中缓存选择器是减少选择时间的最佳方法之一。对于任何大于 1 的用途，请使用解决方案 2。