Javascript 每次单击后将元素ID增加1？

我正在尝试使用jQuery

.clone（）

方法克隆页面上的多个div。问题是，一旦一个div被克隆，它就需要有一个唯一的ID。克隆的ID也必须存在。我想我可以保留旧的ID，然后只添加一个数字，随着页面上的div的增加而增加

例如：基本ID=1，因此第一分区将是

ID

，第二分区将是

ID-2

，第三分区将是

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>

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

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

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

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

修改后的答案：

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

订正答复：

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

我认为在您的情况下，$（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");
});

我认为在您的情况下，$（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");
});

看这个直播

结果:

请看现场直播

结果:

请参见：

根据你的评论，我认为这正是你想要的：

---

“啊，当基本ID是唯一的时，有没有办法重置元素ID？例如。）”如果克隆div“one”，它将产生“one-1”，然后是“one-2”，但是如果克隆div“two”，它将产生“two-3”，而不是“two-1”

请参见以下内容：

根据你的评论，我认为这正是你想要的：

---

“啊，当基本ID是唯一的时，有没有办法重置元素ID？如果你克隆div“one”，它将产生“one-1”，然后是“one-2”，但是如果你克隆div“two”，它将产生“two-3”，而不是“two-1”

你可以这样做：

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

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

---

演示：

您可以这样做：

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

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

---

演示：

也许这些答案中的一些会有所帮助。也许这些答案中的一些会有所帮助。我喜欢这个例子，但正如你在我的OP中看到的，我有多个div。所以，如果你使用这个，克隆div“one”，它将产生“one-1”，然后是“one-2”，但是如果你克隆div“two”，它将产生“two-3”，而不是“two-1”。我喜欢这个例子，但正如你在我的OP中看到的，我有多个div。所以，如果你使用这个，克隆div“one”，它将产生“1-1”，然后是“1-2”，但如果你再克隆div“two”，它将产生“two-3”，而不是“two-1”。最后一个克隆元素中的最后一个元素？最后一个元素将是id最高的元素。啊，当基id唯一时，有没有办法重置元素id？例如。）“如果克隆div“one”，它将产生“one-1”，然后是“one-2”，但如果克隆div“two”，它将产生“two-3”，而不是“two-1”。“one”和“two”没有硬编码，脚本将在当前id后面加上一个数字（如果没有一个）或增加数字（如果有一个）。这里需要注意的是，被克隆的元素必须具有最高的序列，否则您将需要某种计数器。最后一个元素与最后一个被克隆的元素相同？最后一个元素将是具有最高id的元素。啊，当基id是唯一的时，有没有办法重置元素id？例如。）“如果克隆div“one”，它将产生“one-1”，然后是“one-2”，但如果克隆div“two”，它将产生“two-3”，而不是“two-1”。“one”和“two”没有硬编码，脚本将在当前id后面加上一个数字（如果没有一个）或增加数字（如果有一个）。这里需要注意的是，被克隆的元素必须具有最高的序列，否则需要某种计数器。如果您使用此命令并克隆div“one”，它将生成“one-1”，然后是“one-2”，但如果您克隆div“two”，它将生成“two-3”，而不是“two-1”。与Dany的示例中发生的问题相同。如果使用此选项并克隆div“one”，它将生成“one-1”，然后生成“one-2”，但如果随后克隆div“two”，它将生成“two-3”，而不是“two-1”