jQuery选择器重用最佳实践

将DOM对象存储为变量时，这是该变量的最佳实践用法：

// Option 1 var myElement1 = $(".container").find('ul li:eq(1)'); $(myElement1).css('background', 'red'); // Option 2 var myElement2 = $(".container").find('ul li:eq(2)'); myElement2.css('background', 'blue'); 

  
 
 
One
 
Two
 
Three
 
  

看起来我已经看到了两种方式，正如你所看到的，他们都做到了。 选项1对我来说似乎有点多余，但我只想在将选项2提交给我的个人风格之前进行检查。

Answer 1

第二种选择是完全有效和良好的做法，但第一种选择毫无意义。 您正在尝试jQueryify一个已经jQueryified的对象。 它基本上就像$($("body")) 。

另请注意，将$到包含jQuery对象的变量是一个好习惯。 您的代码应如下所示：

 var $myElement2 = $(".container").find('ul li:eq(2)'); $myElement2.css('background', 'blue'); 

正如@Terry所写，最优化的方式是：

 var $c = $(".container ul li"); var $second = $c.eq(2); 

Answer 2

你是对的，第一种情况是多余的，实际上需要更长的时间来执行（尽管不是很多）

您可以在此处的代码段中看到此内容：

 var s = window.performance.now(); var myElement1 = $(".container").find('ul li:eq(1)'); $(myElement1).css('background', 'red'); var e = window.performance.now(); console.log(e - s); s = window.performance.now(); var myElement2 = $(".container").find('ul li:eq(2)'); myElement2.css('background', 'blue'); e = window.performance.now(); console.log(e - s); 

  
 
 
One
 
Two
 
Three