Клонирование элементов
Метод создает копии выбранных элементов страницы и возвращает их в виде объекта jQuery. Элементы копируются вместе со всеми содержащимися внутри них элементами (так называемое глубокое копирование).
withDataAndEvents — определяет, необходимо ли копировать данные и обработчики событий, установленные на копируемых элементах. По умолчанию, этот параметр равен false.
withDataAndEvents — аналогично версии выше, за исключением одного: в jQuery-1.5.0 значение этого параметра по умолчанию было ошибочно изменено на true. В jQuery-1.5.1 значение по умолчанию было установлено обратно в false.
deepWithDataAndEvents — определяет, нужно ли копировать данные и обработчики установленные на дочерних элементах клонируемого элемента. По умолчанию, принимает значение первого параметра.
Примеры
Допустим, на странице содержится следующий код:
<div class="container"> <div class="hello">Привет</div> <div class="goodbye">Пока</div> </div>
Если мы будем использовать метод append() для того, чтобы вставить элемент с классом hello в конец div'а с классом container, то как известно, append "вырежет" элемент из прошлого места, и вставит в новое. То есть, код:
$(".hello").appendTo(".container");
сделает наш html-код таким:
<div class="container"> <div class="goodbye">Пока</div> <div class="hello">Привет</div> </div>
Если же нам необходимо не переместить элемент, а скопировать, можно воспользоваться методом clone:
$(".hello").clone().appendTo(".container");
В этом случае, перемещен будет клон элемента с классом hello, а значит оригинал никуда не денется:
<div class="container"> <div class="hello">Привет</div> <div class="goodbye">Пока</div> <div class="hello">Привет</div> </div>
Сразу после клонирования, новые элементы существуют только локально, отдельно от страницы. Однако, даже в этот момент, над ними можно совершать такие же манипуляции, как и с элементами, которые находятся на странице. Например, относительно предыдущего примера можно сделать следующее:
$(".hello").clone() // сделаем копию элемента hello .addClass("newElement") // добавим этой копии класс newElement .text("И снова здравствуйте!") // изменим текст внутри нее .appendTo(".container"); // вставим измененный элемент в конец элемента container
В результате, страница станет такой:
<div class="container"> <div class="hello">Привет</div> <div class="goodbye">Пока</div> <div class="hello newElement">И снова здравствуйте!</div> </div>
Параметры метода
По умолчанию, копии элементов не будут содержать обработчиков событий и данных, которыми обладали оригиналы. Если вам необходимо сделать копии, которые бы содержали эти атрибуты, задайте параметр withDataAndEvents со значением true. Однако в случае, если данные представлены массивом или объектом, то при копировании произойдет копирование не самих массивов или объектов, а ссылок на них. То есть за оригиналом и копией элементов будут закреплены общие данные. Чтобы избежать этого необходимо переписать данные, представленные массивами или объектами самостоятельно:
var $elem = $('#elem').data( "arr":[1] ), // оригинал элемента с закрепленным за ним массивом $clone = $elem.clone(true) // создадим копию элемента .data("arr", $.extend( [], $elem.data("arr") )); // и самостоятельно перепишем в нем arr
В случае, если необходимо, чтобы сами элементы были скопированы вместе с данными и обработчиками, а лежащие внутри них элементы - не обязательно, то для экономии компьютерных ресурсов можно указать второй параметр со значением false (этот параметр доступен начиная с jquery-1.5).