克隆一个div并将其ID及其所有子代的ID更改为唯一

2021/01/31 04:11 · jquery ·  · 0评论

使用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)

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

并观看您的活动(如果有)。如果它们依赖id,则必须对其进行修复。

除非您确实需要通过代码唯一地标识每个克隆的DIV,否则我将用可重用的类替换您的ID。否则,David Morton的答案似乎可以解决问题。

大卫·莫顿(David Morton)早在2010年就给出了正确的答案,但我只是想对其进行更新。jQuery.andSelf()在3.0.0中已删除(请参阅adeneo的答案)。最新的和最伟大的(截至撰写本文时)为.addBack()因此,该行将是:

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

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

本文地址:http://jquery.askforanswer.com/kelongyigedivbingjiangqiidjiqisuoyouzidaideidgenggaiweiweiyi.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
  • 下一篇:

    评论已关闭!