每次点击后，将元素ID增加1？

Question

我正在尝试使用jQuery .clone()方法在我的页面上克隆多个div。问题是，一旦克隆了div，它就需要有一个唯一的ID。克隆的ID也必须在那里。我以为我可以保留旧ID，然后只需添加一个数字，随着页面上更多div的增加而增加。

示例：基本ID = 1，因此div为id，则div为id-2，则div为id-3等等。

这可能吗？我的尝试如下：

$("a").click(function(){
        var target = $(this).attr("href");
        var id = $(target).attr("id");
        $(target).clone().attr("id",id + $(id).size()).attr("class","drag").appendTo("body");
});

每个a标记都如下所示：

<a href="#one">One</a>
<a href="#two">Two</a>

然后克隆的元素如下所示：

<div class="drag base" style="background-color:blue" id="one"></div>
<div class="drag base" style="background-color:green" id="two"></div>

Answer 1

请参阅：http://jsfiddle.net/3tu7V/1/

$(function(){
    $("a").click(function(){
            var target = $(this).attr("href");
            var id = $(target).attr("id"); 
            var click = $(target).data("clicked") || 0;
            $(target).data("clicked", ++click);            
            $(target).clone().attr("id",id + click).attr("class","drag").appendTo("body");

    });
});
​

根据您的评论，我认为这样做符合您的要求： “啊，当基本ID是唯一的时，是否有任何方法可以重置元素ID？例如。”如果克隆div“one”，它将产生“one-1”，然后是“one-2”，但是如果你然后克隆div“two”，它将产生“two-3”，而不是“two-1”“

Answer 2

修改回答：

您可以使用jQuery attribute starts with selector来跟踪克隆及其计数：

$("a").click(function() {
    var targetId = $(this).attr("href").substring(1); // "one", "two"
    var count = $("div[id^=" + targetId + "]").length; // initial value will be 1
    $("#" + targetId).clone().attr("id", targetId + '-' + count).attr("class", "drag").appendTo("body");
});

Demo

Answer 3

我认为在你的情况下$（id）.size（）总是= 2.（只有最后一个，它的克隆将具有相同的id） 为什么不使用每次递增的全局变量var clickNumber。 你的代码将是

var clickNumber = 0;    
$("a").click(function(){
        var target = $(this).attr("href");
        var id = $(target).attr("id");
        clickNumber ++;
        $(target).clone().attr("id","id-" + clickNumber).attr("class","drag").appendTo("body");
});

Answer 4

直播example

var increment = 2;

$('a').live('click', function() {
    $(this).clone().attr('id','id-' + (increment++)).appendTo('body');
});​

结果：

Answer 5

你可以这样做：

$('a').addClass('link');
$('body').on('click', 'a', function() {
    $(this).clone(true).attr('id', 'id-' + $('.link').length).appendTo('body');
});​

演示：http://jsfiddle.net/Em8PE/1/