jQuery克隆重复的ID

我有一个包含在其中的大量无序列表的HTML元素。 我需要克隆这个元素放置在页面上的不同风格添加(这是很容易使用jQuery)。

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

但是,问题是,所有的列表及其关联的列表项都有ID并clone它们。 是否有一个简单的方法来replace所有这些重复的ID使用jQuery之前追加?

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

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

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

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

由于OP要求在追加所有重复的ID之前replace所有重复的ID,也许这样的事情会起作用。 假设你想克隆MainConfig_1这样的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:

 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")); 

要创build像这样的新的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> 
 $("#MainConfig") .clone(false) .find("ul,li") .removeAttr("id") .appendTo($("#smallConfig")); 

尝试一下大小。 🙂

[修改]修正红色方块的评论。

我使用这样的:$(“#details”)。clone()。attr('id','details_clone')。after(“h1”)。show();

这是基于罗素的回答,但更多的审美和function的forms。 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的function,但也需要捕捉表单标签。

添加另一个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; } 

如果你在页面上有几个类似的项目,最好使用类,而不是ID。 这样,你可以在不同的容器ID里面应用样式。

我相信这是最好的方法

 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.