Question

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

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

我希望这会添加3个新的列表项。但是它添加了一个然后没有...控制台.log确实输出3次，所以为什么追加不会发生3次？

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

Answer 1

当DOM element附加到另一个时，它实际上已从其原始位置移除并插入新位置。例如，假设您有此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());

Answer 2

刚刚克隆

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

为什么常规for循环似乎不适用于jQuery？

2 个答案: