如何在克隆元素时避免重复的ID？

当使用jquery克隆方法时，处理重复的id的策略是什么？例如，我需要在未指定的次数内克隆一个按钮。哪个是生成唯一ID并跟踪它的最好方法？如何在克隆元素时避免重复的ID？

<div id="button-pool"> 
    <button id="bt1" class="return">Button</button> 
</div> 

$(document).ready(function(){ 
    $("#bt1").click(function(){ 
     var newButton = $(this).clone(); 
     $("#button-pool").append(newButton); 
    }); 
});

http://jsfiddle.net/uv95nzrk/

来源

2014-09-18 Maigret

你有没有考虑过把所有的按钮都分配给一个普通的类，并且通过这种方式而不是通过ID来附加点击功能？ – UtopiaLtd 2014-09-18 16:12:48

利用类似@UtopiaLtd说。 – Mike 2014-09-18 16:13:13

[克隆在JQuery中并为每个添加唯一的ID]（http://stackoverflow.com/questions/8711970/clone-in-jquery-and-adding-unique-ids-for-each） – andy 2014-09-18 16:15:15

您可以使用Attribute StartsWith Selector，看看有多少按钮与同一ID命名样式已经存在：

"button[id^='bt']"

并追加它由1增加它：

$(document).ready(function(){ 
 
    $("#bt1").click(function(){ 
 
     var idcount = $("button[id^='bt']").length; 
 
     
 
     var newButton = $(this).clone(); 
 
     newButton.attr("id", "bt" + (idcount + 1)); 
 
     $("#button-pool").append(newButton); 
 
    }); 
 
});

.return{ 
 
    background-color: yellow; 
 
} 
 
#bt1{ 
 
    border: 2px solid navy; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div id="button-pool"> 
 
    <button id="bt1" class="return">Button</button> 
 
</div>

来源

2014-09-18 16:15:46 LcSalazar

您可以使用一个简单的计数器，并追加到按钮的ID。这个计数器应该在闭包内部，不要干扰页面中的其他脚本;

$(document).ready(function(){ 
    var btnId = 1; // This is a safe place, inside a closure (function body). 
    $("#bt1").click(function(){ 
     var newButton = $(this).clone(); 
     newButton.attr('id','btn' + btnId); 
     btnId++; // Increment after creating each new button 
     $("#button-pool").append(newButton); 
    }); 
});

你也可以创建没有ID的按钮，除非你真的需要它们。你为什么需要跟踪他们？

来源

2014-09-18 16:12:12 JotaBe

像这样的东西应该工作

var count = 0; 
$("#bt1").click(function(){ 
    var newButton = $(this).clone(); 
    newButton.attr("id", "bt"+count); 
    $("#button-pool").append(newButton); 
    count++; 
});

来源

2014-09-18 16:13:50 Jimmy

利用班达致这是一个更好的战略，腹胀您的DOM生成的ID是不是一个真正的好主意。（可怜的设计实践）

<div id="button-pool"> 
    <button class="btns" custom-attr='1' class="return">Button</button> 
</div> 

$(document).ready(function(){ 
    $(".btns").click(function(){ 
     var newButton = $(this).clone(); 
     newButton.attr('custom-attr', parseInt(newButton.attr('custom-attr'))+1); 
     $("#button-pool").append(newButton); 
    }); 
});

您还可以使用自定义属性来跟踪你的按钮，这样，他们仍然彼此唯一的，但他们并不真的需要有ID的

来源

2014-09-18 16:14:40 Mike

$(document).ready(function(){ 
    $("body").on('click','#bt1',function(){ 
     var newButton = $(this).clone(); 
     $("#button-pool").append(newButton); 
    }); 
});

来源

2014-09-18 16:15:02

简单的答案是使用class，而不是id。

来源

2014-09-18 16:25:06

如何在克隆元素时避免重复的ID？

回答

相关问题