Клонировать div и изменить его ID и все его дети, чтобы быть уникальным - PullRequest
22 голосов
/ 25 февраля 2010

Используя JQuery, можно клонировать Div таким образом и изменить его, добавить новый идентификатор к его идентификатору и всем дочерним идентификаторам?

Например, я хотел бы иметь возможность клонировать это:

<div id="current_users">
<table id="user_list">
<tr id="user-0">
<td id="first_name-0">Jane</td>
<td id="last_name-0">Doe</td>
</tr>
<tr id="user-1">
<td id="first_name-1">John</td>
<td id="last_name-1">Doe</td>
</tr>
</table>
</div>

И выглядело это так:

<div id="current_users_cloned">
<table id="user_list_cloned">
<tr id="user-0_cloned">
<td id="first_name-0_cloned">Jan</td>
<td id="last_name-0_cloned">Doe</td>
</tr>
<tr id="user-1_cloned">
<td id="first_name-1_cloned">John</td>
<td id="last_name-1_cloned">Doe</td>
</tr>
</table>
</div>

Или мне просто переосмыслить свою структуру и использовать атрибуты rel и многократно используемые объявления классов?

Спасибо

Теган Снайдер

Ответы [ 3 ]

39 голосов
/ 25 февраля 2010
$("#current_users").clone(false).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + "_cloned"); });

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

1 голос
/ 25 февраля 2010

Если вам на самом деле не нужно однозначно идентифицировать каждый из этих клонированных DIV с помощью кода, я заменил бы ваши идентификаторы на повторно используемые классы. В противном случае ответ Дэвида Мортона выглядит так, как будто он может сработать.

0 голосов
/ 24 мая 2019

Дэвид Мортон получил правильный ответ еще в 2010 году, но я просто хотел его обновить. jQuery удалил .andSelf() в 3.0.0 (см. ответ аденео ). Последний и самый большой (на момент написания статьи) - .addBack(). Таким образом, строка будет:

$("#current_users").clone(false).find('*[id]').addBack().each(function () { $(this).attr('id', function(i , id) { return id + "_cloned" + ruleId}) });

Если вам нужно вернуть его в виде строки, как это было для меня, добавьте .get(0).outerHTML; в конец.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...