Клонирование элементов с уникальными id в jQuery (clone)

Язык jQuery позволяет перемещать элементы внутрь структуры, удалять и создавать их на лету. Вроде бы богатый функционал. Но иногда требуется продублировать уже существующий блок.

Не опытные пользователи будут использовать свойства css с заранее загруженными блоками в dom дереве. А бывалые программисты будут использовать функцию clone().

clone() в jQuery позволяет не только на лету продублировать любой тег с его содержимым, но и поменять его свойства, например класс, name в поле input и т.д. Т.е. уникализировать любой тег и его свойство. Рассмотрим этот полезный пример.

Сначала просто клонируем обычный тег с классом .clonw.

<div class=”zdess”>
<div class=”clonw”>Клонировать меня</div>
</div>

<script type=”text/javascript”>
$(document).ready(function(){
$(“.clonw”).clone().appendTo(“.zdess”);
});
</script>

В этом примере мы скопируем div с .clonw и вставим его внутрь .zdess за счет appendTo(). Учтите clone() работает только совместно с appendTo(), prependTo() и подобными функциями.

Теперь модернизируем пример. Допустим при клике на кнопку, нам нужно создать новое поле с уникальным id номером. Делается это так:

<a href=”#” class=”add”>Добавить</a><br />
<div class=”forma”>
<div id=”name” rebest=’yes’>Ваше имя: <input type=”text” value=”Клонировать” /></div>
</div>

<script type=”text/javascript”>
$(document).ready(function(){
$(“.add”).click(function(){ //
var links = $(“[rebest=’yes’]”).length; //кол-во элементов с req=’true’
$(“#name”).clone().attr(‘id’, ‘name’ + links).appendTo(“.forma”); //клонируем с новы id элемент в элемент с классом forma
});
});
</script>

Этот скрипт работает очень просто. Когда мы нажимаем на ссылку .add срабатывает функция, где var links подсчитывает количество элементов с параметром [rebest=’yes’]. Затем при клонировании к названию id-ка, добавляется это число. При каждом нажатии “Добавить” число элементов будет новым и соответственно, id будет другим.

Клонирование удобно использовать в интерактивных формах, где пользователю нужно добавить дополнительные параметры для своих данных.