如何在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); 
}​