Question

使用JQuery可以像这样克隆一个Div并更改为它的ID添加一个新的标识符以及所有它的子ID？

例如，我希望能够克隆这个：

<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属性和可重用的类声明？

谢谢，

Tegan Snyder

Answer 1

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

如果有附件，请观看您的活动。如果他们依赖id，你将不得不修复它们。

Answer 2

除非你真的需要通过代码唯一地识别每个克隆的DIV，否则我会用可重用的类替换你的ID。否则，大卫莫顿的回答看起来可能会成功。

Answer 3

大卫·莫顿（David Morton）在2010年得到了正确的答案，但我只是想对其进行更新。 jQuery在3.0.0中删除了.andSelf()（请参阅adeneo's answer）。最新的和最伟大的（在撰写本文时）是.addBack()。所以这行是：

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

如果您需要将它作为字符串取回，对我来说就是这种情况，请在末尾添加.get(0).outerHTML;。

克隆div并更改它的ID，并将其所有子项都改为唯一

3 个答案: