每次点击后将元素ID增加一吗？

Question

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

示例：基本ID = 1，因此div 1将是id ，然后div 2将是id-2 ，然后div 3将是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 属性来跟踪克隆及其数量：

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

演示版

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

看到这个现场的例子

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/