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.
