我有一个 HTML 元素，其中包含大量无序列表。我需要克隆这个元素以放置在页面上的其他位置，并添加不同的样式（这很简单，使用 jQuery）。
$("#MainConfig").clone(false).appendTo($("#smallConfig"));
然而，问题在于所有列表及其关联的列表项都有 ID，clone 复制了它们。有没有一种简单的方法可以在追加之前使用 jQuery 替换所有这些重复的 ID？
【问题讨论】：
标签： javascript jquery html
$("#MainConfig")
.clone(false)
.find("ul,li")
.removeAttr("id")
.appendTo($("#smallConfig"));
试穿尺寸。 :)
[编辑] 修复 redsquare 的评论。
【讨论】：
$('#itemBase').clone(true).removeAttr('id').attr('id','item'+nextItemId++).removeClass('hidden').addClass('item').insertAfter($('#itemBase'));
如果您将在一个页面上有多个相似的项目，最好使用类，而不是 id。这样您就可以将样式应用于不同容器 id 内的 uls。
【讨论】：
如果您需要在克隆列表项后引用它们，则必须使用类，而不是 ID。将所有 id="..." 更改为 class="..."
如果您正在处理遗留代码或其他内容并且无法将 ID 更改为类，则必须在附加之前删除 id 属性。
$("#MainConfig").clone(false).find("*").removeAttr("id").appendTo($("#smallConfig"));
请注意，您无法再引用单个项目。
【讨论】：
我使用这样的东西： $("#details").clone().attr('id','details_clone').after("h1").show();
【讨论】：
var i=$('#itemBase'); i.clone(true).attr('id','item'+nextItemId++) .removeClass('hidden').addClass('item').insertAfter(i);
由于 OP 要求在添加之前替换所有重复的 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>
【讨论】：
这是基于 Russell 的回答，但对形式来说更具美感和功能性。 jQuery：
$(document).ready(function(){
var cur_num = 1; // Counter
$('#btnClone').click(function(){
var whatToClone = $("#MainConfig");
var whereToPutIt = $("#smallConfig");
var cloned = whatToClone.clone(true, true).get(0);
++cur_num;
cloned.id = whatToClone.attr('id') + "_" + 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;
}
if(element.name)
{
var matches = element.name.match(/(.+)_\d+/);
if(matches && matches.length >= 2) // Captures start at [1].
element.name = matches[1] + "_" + cur_num;
}
});
$(cloned).appendTo( whereToPutIt );
});
});
标记：
<div id="smallConfig">
<div id="MainConfig">
<ul>
<li id="red_1">red</li>
<li id="blue_1">blue</li>
</ul>
<input id="purple" type="text" value="I'm a text box" name="textboxIsaid_1" />
</div>
</div>
【讨论】：
FWIW，我使用了 Dario 的函数，但还需要捕获表单标签。
添加另一个类似这样的 if 语句：
if(element.htmlFor){
var matches = element.htmlFor.match(/(.+)_\d+/);
if(matches && matches.length >= 2) // Captures start at [1].
element.htmlFor = matches[1] + "_" + cur_num;
}
【讨论】：
我相信这是最好的方法
var $clone = $("#MainConfig").clone(false);
$clone.removeAttr('id'); // remove id="MainConfig"
$clone.find('[id]').removeAttr('id'); // remove all other id attributes
$clone.appendTo($("#smallConfig")); // add to DOM.
【讨论】：
这是一个带有 id 的解决方案。
var clone = $("#MainConfig").clone();
clone.find('[id]').each(function () { this.id = 'new_'+this.id });
$('#smallConfig').append(clone);
如果你想动态设置 id，你可以使用 counter 而不是 'new_'。
【讨论】：