为什么常规循环似乎不工作在jQuery中？

我在这里有一些代码，谁能告诉我为什么for循环不按照我期望的方式工作？为什么常规循环似乎不工作在jQuery中？

$(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，并且想明白为什么这不起作用。

来源

2013-02-28 GiH

你需要克隆它。您正在读取相同的DOM节点。 – nhahtdh 2013-02-28 00:30:11

这是什么意思？ – GiH 2013-02-28 00:32:46

'details' - '$（“

新列表项

”）' - 是一个包含DOM元素引用的jQuery对象。每次添加它时，都会将相同的元素附加到'$（'＃list'）'。一个元素只能在DOM树中占据一个位置，因此除了“分离”元素并将其附加回到同一位置外，您什么都不做。 – 2013-02-28 00:38:45

当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元素到它已经在同一位置是！要插入新项目到您的列表，你需要做的山姆建议，并将其附加到列表之前克隆原来的项目：

$('#list').append(details.clone());

来源

2013-02-28 00:54:15

感谢您的解释！我并不关心解决方案，因为我试图了解发生了什么:) – GiH 2013-02-28 01:07:39

只是克隆

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

来源

2013-02-28 00:33:45 Sam

为什么常规循环似乎不工作在jQuery中？

回答

相关问题