jQuery克隆重复ID
jQuery克隆重复ID
提问于 2009-01-06 10:46:32
我有一个包含大量无序列表的HTML元素。我需要克隆这个元素，以添加不同的样式放在页面上的其他地方(使用jQuery就足够简单了)。
$("#MainConfig").clone(false).appendTo($("#smallConfig"));然而，问题是所有列表及其关联的列表项都有ID，并且clone复制了它们。有没有一种简单的方法可以在追加之前使用jQuery替换所有这些重复的ID？
回答 9
Stack Overflow用户
回答已采纳
发布于 2009-01-06 18:29:00
如果需要在克隆列表项之后引用列表项，则必须使用类，而不是ID。更改所有id="...“to class="...“
如果您正在处理遗留代码或其他东西，并且不能将id更改为classes，则必须在追加之前删除id属性。
$("#MainConfig").clone(false).find("*").removeAttr("id").appendTo($("#smallConfig"));请注意，您不再有办法引用单个项目。
Stack Overflow用户
发布于 2011-06-14 21:32:16
由于操作员要求在添加之前替换所有重复的id，因此这样的方法可能会起作用。假设您想要在HTML块中克隆MainConfig_1，如下所示：
<div id="smallConfig">
<div id="MainConfig_1">
<ul>
<li id="red_1">red</li>
<li id="blue_1">blue</li>
</ul>
</div>
</div>代码可能如下所示，查找克隆块的所有子元素(和子元素)，并使用计数器修改它们的id：
var cur_num = 1; // Counter used previously.
//...
var cloned = $("#MainConfig_" + cur_num).clone(true, true).get(0);
++cur_num;
cloned.id = "MainConfig_" + cur_num; // Change the div itself.
$(cloned).find("*").each(function(index, element) { // And all inner elements.
if(element.id)
{
var matches = element.id.match(/(.+)_\d+/);
if(matches && matches.length >= 2) // Captures start at [1].
element.id = matches[1] + "_" + cur_num;
}
});
$(cloned).appendTo($("#smallConfig"));要像这样创建新HTML，请执行以下操作：
<div id="smallConfig">
<div id="MainConfig_1">
<ul>
<li id="red_1">red</li>
<li id="blue_1">blue</li>
</ul>
</div>
<div id="MainConfig_2">
<ul>
<li id="red_2">red</li>
<li id="blue_2">blue</li>
</ul>
</div>
</div>Stack Overflow用户
发布于 2009-01-06 11:26:26
$("#MainConfig")
.clone(false)
.find("ul,li")
.removeAttr("id")
.appendTo($("#smallConfig"));试试这件衣服的大小。:)
编辑修正了redsquare的评论。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/416081
复制相关文章
相似问题