Jquery each() 函数

Question

给定列表

<ul>
    <li>aaa</li>
    <li>sss</li>
    <li>ddd</li>
</ul>

JS 代码：

$(document).ready( function () {

    $("ul li").each( function () {

          $("ul").empty();

          alert( $(this).text() );        

    });

});

为什么这段代码在每次迭代时都返回所有元素？为什么列表在第一次迭代时没有被清空？

- Oto Shavadze

---

.each() 函数创建一个闭包：这就是它的全部内容。 - frenchie

与问题无关，但尝试使用 console.log( $(this).text() );，这样您就不必每次都点击 alert()。关于主题：如果您不需要对 <li> 项执行某些操作，只需执行 $("ul li").empty();。 - user1467267

var myList = []; $("ul li").each(function(){ myList[myList.length] = $(this).html(); }); $("ul li").empty(); console.log(myList); 通过这段代码，您可以存储innerHTML以供重新使用，同时仍然可以将它们全部清空。这可能不是您想要的，但我正在尝试展示解决您（可能）问题的方法。 - user1467267

Answer 1

无序列表确实在您的第一次迭代中被清除，但列表项仍由您使用$("ul li")创建的jQuery对象引用。它们可能不再是DOM的一部分，但它们仍然存在于内存中，您仍然可以访问和操作它们。

- Frédéric Hamidi

Answer 2

.each()函数创建了一个闭包：这就是闭包的全部内容。

当执行$("ul").empty();这一行时，它清除了对列表的引用，但由于同样的列表也被this引用，因此该列表仍然存在，只是不再被$("ul li")引用。

- frenchie

---

闭包可以捕获局部变量，但是<li>元素仍然被引用在jQuery对象本身中（这就是它们如何能够在每次迭代中绑定到this）。empty()已经从文档中删除了这些元素，但它们仍然以独立的形式存在于内存中（即它们的parentNode属性为null）。 - Frédéric Hamidi