如何在jQuery中创建一个动态创建元素的深层副本？

Question

我要动态地生成与jQuery 8新段：

http://jsfiddle.net/johnhoffman/Dfydn/

然而，这段代码的jQuery只增加了一个段落，我的div（与文字为“7”）。

var attached = $("<p>"); 
var sandbox = $("#sandbox"); 

for (var i = 0; i < 8; i++) { 
    // How come reseting attached works? attached = $("<p>"); 
    attached.html(i).appendTo(sandbox); 
}​ 

HTML：<div id="sandbox"></div>​

我不想为循环的每个迭代运行attached = $("<p>");，因为我想利用原型设计模式 - 我想建立一个段落，然后改变副本它阻止了每次从头开始构建。我如何制作一个动态创建的元素的深层副本？

Answer 1

你可以试试这个。使用.clone()方法。当你使用clone（）时你也不需要.html（i）。因为克隆返回一个jQuery对象，所以你甚至不需要在它周围包装一个$（）。

var attached = $("<p>"); 
var sandbox = $("#sandbox"); 

for (var i = 0; i < 8; i++) { 
    attached.clone().appendTo(sandbox); 
} 

此外，如果你想克隆事件处理程序，你应该使用.clone（true）。见http://api.jquery.com/clone/更多信息有关clone()

Answer 2

var attached = $("<p>"); 
var sandbox = $("#sandbox"); 

for (var i = 0; i < 8; i++) { 
    // How come reseting attached works? attached = $("<p>"); 
    attached.clone().html(i).appendTo(sandbox); 
}​ 

Answer 3

jQuery的.clone()方法恰恰是making deep copies。从文档：

描述：创建一组匹配元素的深层副本。

例子：

var attached = $("<p>"); 
var sandbox = $("#sandbox");  

for (var i = 0; i < 8; i++) { 
    $(attached).clone().appendTo(sandbox); 
}​