1

我这里有一些代码，谁能告诉我为什么 for 循环不能按我期望的方式工作？

$(function(){
    var details = $("<li> New list item</li>")
    for( i=0; i<3;i++){
        $('#list').append(details);
        console.log(i);     
    };
});

我希望这会添加 3 个新的列表项。但是它加了一个然后什么都没有......虽然console.log确实输出了3次，那么为什么追加没有发生3次呢？

代码没用，我只是在学习 jQuery，想了解为什么这不起作用。

4

2 回答 2

2

当一个DOM 元素附加到另一个元素时，它实际上是从其原始位置移除并插入到新位置。例如，假设您有以下 HTML 代码：

<div id="p1">
    <div id="c1">Child</div>
</div>
<div id="p2">
</div>

然后执行以下 JavaScript 代码：

$('#p2').append($('#c1'));

然后，生成的 HTML 将是：

<div id="p1">
</div>
<div id="p2">
    <div id="c1">Child</div>
</div>

这就是为什么您的循环在第一次迭代后没有向列表中添加任何新项目的原因，因为它正在将 DOM 元素重新定位到它已经存在的位置！要将新项目插入列表，您需要按照Sam的建议进行操作，并在将原始项目附加到列表之前对其进行克隆：

$('#list').append(details.clone());
于 2013-02-28T00:54:15.867 回答
0

只需克隆

$(function(){
var details = $("<li> New list item</li>");
for( i=0; i<3;i++){
    $('#list').append(details.clone());
    console.log(i);     
 };
});
于 2013-02-28T00:33:45.810 回答