jquery - li 元素未渲染 10 次

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);
}

它显示了li10 次。我无法弄清楚其中的原因。为什么？

score 0 · Accepted Answer

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

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

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

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

这是一个小提琴：http: //jsfiddle.net/5FVAj/1/

score 0 · Accepted Answer

当您声明时，我相信它是以下内容：

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

在循环之外，您有该对象的单个实例。jquery 代码翻译的内容类似于 document.createElement("li") （然后创建一个文本节点并将其添加到元素中）

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

这里有更多信息：克隆一个元素并将其添加到 Dom 多次关于为什么每次都需要创建一个新元素的原因。如果确实需要克隆已经创建的对象，请使用 jquery 的Clone方法

score 0 · Accepted Answer

在第一个示例中，您定义了一个<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
...

score 0 · Accepted Answer

在前一种方法中，您正在创建一个简单的 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);

4 回答 4