1

我正在尝试使用 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>
4

5 回答 5

2

看到这个：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””

于 2012-09-09T18:44:27.003 回答
1

修改后的答案：

您可以使用以 selector 开头的 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");
});

演示

于 2012-09-09T18:30:47.140 回答
1

我认为在您的情况下 $(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");
});
于 2012-09-09T18:31:06.077 回答
1

看这个活生生的例子

var increment = 2;

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

结果：

在此处输入图像描述

于 2012-09-09T18:31:11.227 回答
0

你可以这样做：

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

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

于 2012-09-09T18:44:53.387 回答