Question

我已将li元素声明为全局，并尝试在数组中推送相同的元素。后来我在ul中添加了相同的内容，但只显示了li项，而不是显示10次。

var items = [], ele = $("<li>brad</li>");
for(var i=0; i<10; i++) {
    items.push(ele);
}
$("#myId").append(items);

但如果li元素在循环内声明如下：

for(var i=0; i<10; i++) {
    ele = $("<li>brad</li>")
    items.push(ele);
}

它显示li 10次。我无法弄清楚原因。为什么呢？

Answer 1

在第一个示例中，您定义了一个<li>元素，并将该单个元素添加到该数组10次。第一次迭代，它有一个影响，但其余的9次，它说“是的，那已经在数组中了。”

在第二个示例中，每次迭代都会重新定义一个新元素。每次你给它相同的变量名都没关系......你还在创造代表一个新对象的东西。因此，每次都会在阵列中添加一个新的。

换句话说...... 在循环外定义它：

Create a new element
Add it to the list
Add it to the list
Add it to the list
...

在循环中定义它：

Create a new element
Add it to the list
Create a new element
Add it to the list
Create a new element
Add it to the list
...

Answer 2

在前一种方法中，你正在创建一个dom对象的简单实例，它被添加到数组中10次......这仍然只是一个dom实例，这就是它没有添加10次的原因

一种可能的解决方案是在循环中克隆元素，因为它会创建ele的差异副本，而不是添加相同的元素

var items = [], ele = $("<li>brad</li>");
for(var i=0; i<10; i++) {
    items.push(ele.clone());
}
$("#myId").append(items);

Answer 3

当你宣布：

时，我相信它是以下内容

ele = $("<li>brad</li>");

在循环之外，你有一个该对象的实例。 jquery代码转换为的内容类似于document.createElement（“li”）（然后创建一个文本节点并将其添加到元素中）

但是，由于您只创建了一次节点，因此无法多次插入节点。当你在循环中创建它时，你每次都创建一个唯一的实例，它插入就好了。

这里有更多信息：Cloning an element and adding it to Dom multiple times关于为什么每次都需要创建新元素的原因。如果您确实需要克隆已创建的对象，请使用jquery的Clone方法

Answer 4

您确定要创建DOM对象吗？或者你只是想在你的菜单中注入标记？以下工作正如您所料：

var items = [], ele = "<li>brad</li>";

for (var i = 0; i < 10; i++) {
    items.push(ele);
}

$("#myId").append(items);