Как сделать глубокую копию динамически созданного элемента в jQuery?

Question

Я хочу, чтобы динамически генерировать 8 новых пунктов с JQuery:

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(). Также вам не нужен .html (i), когда вы используете clone(). Поскольку клон возвращает объект 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); 
}​