我想通過使用jQuery .clone()方法克隆我的網頁上的多個div。問題是，一旦div被克隆，它需要有一個唯一的ID。克隆的ID也必須在那裏。我想我可以保留舊的ID，然後添加一個數字，隨着更多的div在頁面上增加。每次點擊後增加一個元素ID？

示例：基本ID =之一，所以DIV一將id，然後DIV 2將id-2，然後格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>

來源

2012-09-09 Charlie

也許有些答案會有所幫助。 http://stackoverflow.com/search?q=jquery+clone+increment+ID –

看到這個：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-1「，然後是」one-2「，但是如果你接着克隆div」two「，它將產生」2-3「，而不是」two -1 「」

來源

2012-09-09 18:44:27 aquinas

修訂的答案：

您可以使用jQuery attribute starts with selector來跟蹤克隆，並且i [R計數：

$("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

來源

2012-09-09 18:30:47

克隆最後一個元素的最後一個元素？ – Charlie

最後一個元素是id最高的元素。 –

啊，有沒有什麼方法可以在基本ID是唯一的時候重置元素ID？防爆。）「如果你克隆一個」div「，它會產生」one-1「，然後是」one-2「，但是如果你克隆div」two「，它會產生」2-3「，而不是」two-1 「」 – Charlie

我想在烏爾情況下$（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-09 18:31:06

我喜歡這個例子，但正如你可以在我的OP中看到的，我有不止一個div。因此，如果你使用這個，並且克隆div爲「one」，它將產生「one-1」，然後是「one-2」，但是如果你接着克隆div「two」，它將產生「2-3」，而不是「兩-1」。 – Charlie

看到這個現場example

var increment = 2; 

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

結果：

enter image description here

來源

2012-09-09 18:31:11 jacktheripper

Dany的例子發生了同樣的問題。如果你使用這個方法並且克隆div爲「one」，它將產生「one-1」，然後是「one-2」，但是如果你接着克隆div「two」，它將產生「2-3」 1" – Charlie

你可以做這樣的事情：

$('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-09 18:44:53 Blender

每次點擊後增加一個元素ID？

回答

Demo

相關問題