最有效的方法来重用jQuery选择的元素

Question

我可以根据理论想象出对此的正确答案,但我只想找到一些确认.我想知道重用jQuery选择元素的最有效方法是什么.例如:

$('#my_div').css('background','red');
//some other code
$('#my_div').attr('name','Red Div');

与

myDiv = $('#my_div');
myDiv.css('background','red');
//some other code
myDiv.attr('name','Red Div');

我假设第二个例子更有效,因为元素#my_div不必多次被发现.那是对的吗？

同样,首先将$(this)保存在变量(例如'obj')中,然后重复使用'obj'而不是反复使用$(this)是否更有效？在这种情况下,jQuery不会被强制一遍又一遍地找到一个元素,但是它被迫将它转换为jQuery对象[$(this)].因此,作为一般的经验法则,如果jQuery对象总是被存储在变量中,如果它将被多次使用,那么它应该是什么？

Answer 1

您应该编写代码,以便限制DOM遍历的数量.

当你写这样的东西:

$('#my_div').css('background','red');
//some other code
$('#my_div').attr('name','Red Div');

你发现了#my_div两次,效率很低.

您可以通过分配选择器的结果(即var x = $('.something'))并操纵变量来改进它x,或者您可以链接方法调用,如下所示:

$('#my_div').css('background','red').attr('name','Red Div');

你会看到上面的代码使用了很多,因为你找到了一次元素.该css()方法将应用CSS样式并返回实际结果$('#my_div'),因此您可以调用另一种方法,在本例中attr().

处理选择器重用的首选方法是将它们存储为变量,并将我的东西包装在一个闭包中.

Answer 2

如果您使用 jQuery 选择器 ( like $('#element'))，那么是的，您应该始终存储结果。

如果您使用对象并将其包装在 jQuery 中（如$(this)），则没有必要，因为 jQuery 不需要再次搜索该元素。