Возможно ли клонировать элементы HTML в jQuery с новым идентификатором и именем?

Я хочу клонировать одну строку таблицы, но когда я клонирую, новый элемент name и id будет таким же, как и элемент, из которого он был клонирован.

Мне нужны клонированные элементы с разными name и id.

Ответы

Ответ 1

Я бы передал prop карту пар ключ/значение для обновления этих значений после клонирования:

$("#selector").clone().prop({ id: "newId", name: "newName"});

Клонированные элементы не существуют в DOM, пока вы их не добавите, поэтому вам не придется беспокоиться о дублировании id, пока вы это не сделаете.

Пример: http://jsfiddle.net/BbpRA/

Обновление: в комментарии вы говорите, что у вас 20 input вам нужно клонировать. Я бы создал функцию, которая принимает элемент DOM и новый идентификатор и имя. Вы даже можете сделать из него небольшой плагин:

(function($) {
    $.fn.cloneWithProperties = function (properties) {
        return this.clone().prop(properties);
    };
})(jQuery)

Использование:

$("#selector").cloneWithProperties({ id: "newId", name: "newName" });

Ответ 2

Вы можете попробовать что-то вроде этого:

<div class="container">
  <div class="goodbye">
    Goodbye
    <div id="h1" class="hello">Hello</div>
  </div>
</div>

$('#h1').clone().attr('id','h2').appendTo('.container');

Ответ 3

Вы можете сделать что-то вроде:

var x = $("#selector").clone();

x.find('#oldID1').attr({id: "newID1", name: "newName1"});
x.find('#oldID2').attr({id: "newID2", name: "newName2"});
...

После его завершения вы можете добавить x туда, где хотите.

Заметьте, что #selector выше относится к вашему элементу строки таблицы.

Ответ 4

Вы можете автоматизировать ваш клон с помощью cloneJS. Это просто бета-версия: CloneJS