Wie mache ich eine tiefe Kopie eines dynamisch erstellten Elements in jQuery?

Question

Ich mag dynamisch 8 neue Absätze mit jQuery generieren:

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

Doch dieser Schnipsel von jQuery fügt nur einen einzigen Absatz zu meinem div (mit dem Text "7" in it).

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>​

Ich will nicht attached = $("<p>"); für jede Iteration der Schleife laufen, weil ich die Verwendung der Prototyp-Design-Muster machen will - ich will einen Absatz bauen und dann ändern Kopien es zu verhindern, dass jedes Mal von Grund auf neu gebaut werden muss. Wie mache ich eine tiefe Kopie eines dynamisch erstellten Elements?

Answer 1

Sie könnten dies versuchen. Verwenden Sie die .clone() Methode. Außerdem benötigen Sie die .html (i) nicht, wenn Sie clone() verwenden. Da Klon ein jQuery-Objekt zurückgibt, müssen Sie nicht einmal eine $() um es herum wickeln.

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

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

Auch wenn Sie die Event-Handler klonen möchten, sollten Sie .clone (true) verwenden. Siehe http://api.jquery.com/clone/ für weitere Informationen über 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

Die jQuery .clone() Methode ist genau für making deep copies. Aus der Dokumentation:

Beschreibung: Erstellen Sie eine tiefe Kopie der Menge der übereinstimmenden Elemente.

Beispiel:

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

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