javascript - 为什么 jQuery 的 each 循环函数会保存对元素对象的引用

Question

最近我发现 jQuery 在 each 中保存了一个变量loop 的函数，如果它已经设置了一个 jQuery 对象引用。例如下面的 $elem value 在每个方法的第二次和第三次迭代期间保持不变，它引用第一个 div。

$("div").each(function(index) {

   //below $elem is initialized with div reference during first iteration
    if (index === 0)
       $elem = $(this);

    var text = "index: <span>" + index + ",</span> <span>$(this).html():</span> <span>" +     $(this).html() + ",</span><span> elem.html():</span> <span>" + $elem.html() + "</span>";

   $("#output").append("<li>" + text + "</li>");
 });

li span {
   color: blue;
 }
 li span:nth-child(2) {
   color: red;
 }
 li span:nth-child(4) {
   color: green;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>1 DIV</div>
<div>2 DIV</div>
<div>3 DIV</div>
<br />jQuery each loop's output:
<ul id="output"></ul>

我有点惊讶$elem不会变成 null或 undefined在 each 的第二次迭代中环形。按照该行为，每三行输出有文本:1 DIV。有谁知道为什么 $elem指第一个 div在每种方法的第二次和第三次迭代期间？ – 谢谢

Answer 1

Does anyone have an idea why $elem refers to the first div during second and third iteration of each method?

因为您在第一次迭代中设置了全局变量 $elem 并且此变量以后永远不会更改。所以在循环中和循环完成后，这个变量将指向第一个 div jQuery 对象。

永远不要忘记使用 var 关键字声明变量。未声明但已初始化的变量成为全局变量。如您所见，它可能会导致困惑和错误。