javascript - How to avoid duplicate id when cloning elements? - Stack Overflow

admin管理员组

文章数量:1392002

What would be a good strategy for dealing with duplicated id's when using jquery clone method? For example, i need to clone a button in a unspecified number of times. Which is the best way for generating unique id's and keep track of it?

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

/

What would be a good strategy for dealing with duplicated id's when using jquery clone method? For example, i need to clone a button in a unspecified number of times. Which is the best way for generating unique id's and keep track of it?

<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/uv95nzrk/

• javascript
• jquery

Share Improve this question Follow edited Sep 18, 2014 at 16:13 Huangism 16.4k77 gold badges5050 silver badges7575 bronze badges asked Sep 18, 2014 at 16:10 SavrigeSavrige 3,80533 gold badges3636 silver badges4040 bronze badges 3

• 3 Have you considered assigning all your buttons a mon class and attaching the click function that way instead of through ids? – UtopiaLtd Commented Sep 18, 2014 at 16:12
• 1 utilize classes like @UtopiaLtd said. – Mike Commented Sep 18, 2014 at 16:13
• possible duplicate of Clone in JQuery and adding unique IDs for each – andy Commented Sep 18, 2014 at 16:15

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

You can use an Attribute StartsWith Selector to see how many buttons with that same id naming style already exists:

"button[id^='bt']"

And append it increasing it by 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./ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="button-pool">
    <button id="bt1" class="return">Button</button>
</div>

Utilizing Classes to acheive this is a much better strategy, bloating your DOM with generated ID's is not really a great idea. (Poor Design Practice)

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

You can also use custom attributes to track your buttons so that they're still unique from one another, but they don't really need to have ID's

Something like this should work

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

You can use a simple counter, and append it to the button id. This counter should be inside a closure not to interfere with the rest of the scripts in your page;

$(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);
  });
});

You can also create the buttons without ids, unless you really need them. Why do you need to keep track of them?

easy answer is use class instead of id.

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

本文标签： javascriptHow to avoid duplicate id when cloning elementsStack Overflow