为什么jQuery's每个循环的函数都保存对元素对象的引用

Why jQuery's each loop’s function saves a reference to an element object

本文关键字:函数 保存 元素 引用 对象 循环 jQuery 为什么      更新时间:2024-02-16

最近我发现jQuery在each循环的函数中保存了一个变量,如果它是用jQuery对象引用设置的。例如,下面的$elem值在每个方法的第二次和第三次迭代期间保持不变,它指的是第一个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>

each循环的第二次迭代中,$elem没有变成nullundefined,这让我有点惊讶。根据该行为,输出在每三行上都有文本:1 DIV。有人知道为什么$elem在每个方法的第二次和第三次迭代中引用第一个div吗感谢

有人知道为什么$elem在每个方法的第二次和第三次迭代中引用第一个div吗?

因为您在第一次迭代中设置了全局变量$elem,而该变量以后再也不会更改。因此,在循环中以及循环完成后,该变量将指向第一个divjQuery对象。

永远不要忘记用var关键字声明变量。未声明但已初始化的变量变为全局变量。正如你所看到的,这可能会导致混乱和错误。

这是因为变量在默认情况下没有词法作用域。如果它被宣布为

var $elem

相反,每次运行函数时,它都会重置为undefined。

有关详细信息,请参阅变量语句开发人员页面。