jQuery 选择器重用最佳实践

Question

将 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');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
   </ul>
 </div>

似乎我已经看到了这两种方式，正如您所看到的，它们都可以胜任。选项 1 对我来说似乎有点多余，但我只是想在将选项 2 提交到我的个人风格之前检查一下。

Answer 1

第二个选项是完全有效和好的做法，但是第一个选项没有意义。您正在尝试 jQuery 化一个已经 jQuery 化的对象。它基本上类似于 $($("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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

它给我大约 2 到 3 毫秒的速度差异。

我会坚持使用第二个选项，因为它更干净、更快。

jQuery 选择器重用最佳实践

jQuery selector re-use best practice

javascript

jquery

jquery-selectors