jQuery克隆重复ID

我有一个HTML元素,其中包含大量无序列表.我需要克隆这个元素放在页面的其他地方添加不同的样式(这很简单,使用jQuery).

$("#MainConfig").clone(false).appendTo($("#smallConfig"));

但问题是,所有列表及其关联的列表项都有ID并clone重复它们.是否有一种简单的方法可以在追加之前使用jQuery替换所有这些重复的ID？

1> Crescent Fre..：

---

如果在克隆列表项后需要一种方法来引用列表项,则必须使用类,而不是ID.将所有id ="..."更改为class ="..."

如果您正在处理遗留代码或某些内容而无法将ID更改为类,则必须在追加之前删除id属性.

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

请注意,您无法再引用单个项目.

2> Russell G..：

---

由于OP在追加它们之前要求一种方法来替换所有重复的id,所以这样的事情可能会起作用.假设您想要在HTML块中克隆MainConfig_1,例如:

    

        

            
red
            
blue
        
    

代码可能类似于以下内容,以查找克隆块的所有子元素(和后代),并使用计数器修改其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:

    

        

            
red
            
blue
        
    
    

        

            
red
            
blue
        
    

3> Salty..：

---

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

尝试大小.:)

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

---

谢谢这非常有用,因为我可以使用`$('#itemBase').clone(true).removeAttr('id').attr('id','item'+ nextItemId ++).removeClass('hidden') .addClass( '项目')insertAfter($( '#itemBase'));`

4> 小智..：

---

我使用这样的东西:$("#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);`