Javascript jQuery克隆重复ID

我有一个HTML元素，其中包含大量无序列表。我需要克隆这个元素，将其放置在添加了不同样式的页面上的其他位置（使用jQuery就足够简单了）

但是，问题是所有列表及其关联的列表项都有ID，并且

clone

会复制它们。在附加之前，是否有一种简单的方法可以使用jQuery替换所有这些重复的ID

$("#MainConfig")
    .clone(false)
    .find("ul,li")
    .removeAttr("id")
    .appendTo($("#smallConfig"));

试试那个尺码。：）

---

[编辑]修复了redsquare的评论。

如果一个页面上有几个类似的项目，最好使用类，而不是ID。通过这种方式，您可以将样式应用于不同容器ID内的uls。

如果您需要在克隆列表项后引用它们，则必须使用类，而不是ID。将所有id=“…”更改为class=“…”

如果您正在处理遗留代码或其他内容，并且无法将id更改为类，则必须在附加之前删除id属性

$("#MainConfig").clone(false).find("*").removeAttr("id").appendTo($("#smallConfig"));

请注意，您再也没有办法引用单个项目了。

我使用的方法如下：

---

$（“#details”）.clone（）.attr（'id'，'details_clone'）。在（“h1”）.show（）之后

由于OP要求在添加重复id之前替换所有重复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>

要创建如下所示的新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：

标记：

<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.”

在运行append之前，我会删除id，否则在dom中复制id仍然会产生恶劣的效果，这与Salty在他的示例中所做的基本相同。我会试一试，但我更愿意为所有子级使用全局查找，以防标记更改和父级中的其他元素被复制没有问题。谢谢你抓住了我的错误=]谢谢这非常有用，因为我可以使用

$（'itemBase'）.clone（true）.removeAttr（'id'）.attr（'id'，'item'+nextItemId++.removeClass（'hidden'）.addClass（'item'）.insertAfter（$（'itemBase'））

是否可以通过替换ID来实现类似的功能？然后必须跟踪ID是如何更改的（即前缀、后缀），并在引用克隆元素时使用字符串连接来重建正确的ID。烦人的只需使用classes.Clone和change id:“哦，它甚至更短：

vari=$（'#itembease'）；i、 clone（true）.attr（'id'，'item'+nextItemId++）.removeClass（'hidden'）.addClass（'item'）.insertAfter（i）
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.

var clone = $("#MainConfig").clone();
clone.find('[id]').each(function () { this.id = 'new_'+this.id });
$('#smallConfig').append(clone);