.clone( [ сДаннымиИСобытиями ] )
Возвращает: jQuery
Описание: Создает полную копию набора соответствующих элементов.
.clone( [ сДаннымиИСобытиями ], [ глубокийСДаннымиИСобытиями ] )
Добавлена в версию: 1.5
сДаннымиИСобытиями
Логическое значение, указывающее должен ли обработчик событий быть скопирован вместе с элементами. Значение по умолчанию
false. *В 1.5.0 значение по умолчанию ошибочно true. Это будет исправленно обратно в false в 1.5.1 и выше.глубокийСДаннымиИСобытиями
Логическое значение указывающее, должны ли обработчики событий и данных для всех детей из клонированных элементов быть скопированы. По умолчанию его значение соответствует значению первого аргумента (по умолчанию false).
.clone( [ сДаннымиИСобытиями ] )
Добавлена в версию: 1.0
сДаннымиИСобытиями
Логическое значение, указывающее должен ли обработчик событий быть скопирован вместе с элементами. Начиная с JQuery 1,4 элемент данных будет также скопирован.
Метод .clone() выполняет полное копирование набора соответствующих элементов, это означает, что он копирует соответствующие элементы, а также всех потомков этих элементов и текстовые узлы. При использовании в сочетании с одним из методов вставки, .clone() это удобный способ дублировать элементы на странице. Рассмотрим следующий HTML:
<div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>
Как показано в обсуждении к .append(), как правило, когда мы вставляем элемент где-то в DOM, то он перемещяется со старого места. Так что, учитывая код:
$('.hello').appendTo('.goodbye');
В результате будет DOM структура:
<div class="container">
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
Чтобы предотвратить это, и вместо создания копии элемента, мы могли бы написать следующее:
$('.hello').clone().appendTo('.goodbye');
Это произведет:
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
Обратите внимание, что когда мы используем метод
.clone(), мы можем изменить клонированные элементы или их содержание до (пере-)вставки их в документ.
Как правило, любые обработчики событий, связанные с оригинальным элементом, не копируются на клон. Опциональный параметр сДаннымиИСобытиями позволяет нам изменить это поведение, и вместо этого также делать копии всех обработчиков событий, и связать их с новой копией элемента. Начиная с jQuery 1.4, все данные элемента (прикрепленные с помощью метода .data()) также копируются в новую копию.
Однако, объекты и массивы внутри элемента данных не копируются и будут по-прежнему распределяться между клонированным элементом и оригинальным элементом. Для глубокой копии всех данных, копируйте каждый вручную:
Начиная с jQuery 1.5, сДаннымиИСобытиями могут быть расширины с глубокийСДаннымиИСобытиями для копирования событий и данных для всех детей из клонированных элементов.
Примеры
Пример 1
Клонирует все элементы b (после чего выбирает клонов) и вставляет их перед параграфами.Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("b").clone().prependTo("p"); }); </script> </head> <body> <b>Hello</b><p>, how are you?</p> </body> </html>
Пример 2
Создает кнопку, способную клонировать сама себя (клоны также могут копировать себя).
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $(this).clone(true).insertAfter(this); }); }); </script> </head> <body> <button>Clone Me!</button> </body> </html>
Была ли эта информация полезной?
