Javascript Jquery：更改最后一个div'；s内容id，但不反映对上一个内容id的更改

我有一个div的id是

xyz1

，里面有三个div的id是

abc1

，

def1

，

ghi1

。 当用户单击添加新按钮时，当前div

xyz1

应该被克隆并隐藏，克隆的div将被附加到下面的

xyz1

div。新克隆的div将具有父id

xyz2

，其子div应具有id

abc2

，

def2

，

ghi2

。 下面的代码应该更有意义

<div id="xyz1" style="display:block">
     <div id="abc1" class="abc"></div>
     <div id="def1" class="def"></div>
     <div id="ghi1" class="ghi"></div>
</div>

重要提示：不应修改上一个div的id号

我所做的

var $cloned_div = $("#xyz1").clone().prop("id","xyz2");
$($cloned_div).appendTo("div:last");
$("#xyz2").each(function(){
   $(".abc").prop("id","abc2");
   $(".def").prop("id","def2");
   $(".ghi").prop("id","ghi2");
});

这在第二个div中运行良好，但

prop（）

方法也将应用于前一个div。意味着前一个div的id也会被反映出来

事情就是这样

<div id="xyz1" style="display:block">
     <div id="abc2" class="abc"></div>
     <div id="def2" class="def"></div>
     <div id="ghi2" class="ghi"></div>
</div>
<div id="xyz2" style="display:block">
     <div id="abc2" class="abc"></div>
     <div id="def2" class="def"></div>
     <div id="ghi2" class="ghi"></div>
</div>

---

我不想更改类名，因为在我的类代码中有许多依赖项

在html中，最后一个div始终可见，您可以通过jQuery选择器选择它。在找到visible div之后，您应该得到它的id索引，以便正则表达式能够完成这项工作。找到最后一个div并为其编制索引后，请使用

.clone（）

复制它，并更改克隆元素的id属性。最后，在最后一个div by之后插入复制的元素并隐藏旧div

$("button").click(function(){
  // selecte the only div that is visible
  var div = $("[id^='xyz']:visible");
  // get id of target div
  var id = parseInt(div.attr("id").match(/\d+/))+1;
  // copy target div and change id of it and it childs and insert new div after old div.
  div.clone().attr("id", "xyz"+ id)
     .find(".abc").attr("id", "abc"+ id).end()
     .find(".def").attr("id", "def"+ id).end()
     .find(".ghi").attr("id", "ghi"+ id).end()
     .insertAfter(div);
  // hide target div
  div.hide();
});

$（“按钮”）。单击（函数（）{
var div=$（“[id^='xyz']：可见”）；
var id=parseInt（div.attr（“id”）.match（/\d+/）+1；
div.clone（）.attr（“id”，“xyz”+id）
.find（“.abc”）.attr（“id”，“abc”+id）.end（）
.find（“.def”）.attr（“id”，“def”+id）.end（）
.find（“.ghi”）.attr（“id”，“ghi”+id）.end（）
.插入者（部门）；
隐藏分区（）；
日志（$（“[id^='xyz']：可见”）[0].outerHTML）；
});

新增
在html中，始终显示最后一个div，您可以通过jQuery选择器选择它。在找到visible div之后，您应该得到它的id索引，以便正则表达式能够完成这项工作。找到最后一个div并为其编制索引后，请使用
.clone（）
复制它，并更改克隆元素的id属性。最后，在最后一个div by之后插入复制的元素并隐藏旧div

$("button").click(function(){
  // selecte the only div that is visible
  var div = $("[id^='xyz']:visible");
  // get id of target div
  var id = parseInt(div.attr("id").match(/\d+/))+1;
  // copy target div and change id of it and it childs and insert new div after old div.
  div.clone().attr("id", "xyz"+ id)
     .find(".abc").attr("id", "abc"+ id).end()
     .find(".def").attr("id", "def"+ id).end()
     .find(".ghi").attr("id", "ghi"+ id).end()
     .insertAfter(div);
  // hide target div
  div.hide();
});


$（“按钮”）。单击（函数（）{
var div=$（“[id^='xyz']：可见”）；
var id=parseInt（div.attr（“id”）.match（/\d+/）+1；
div.clone（）.attr（“id”，“xyz”+id）
.find（“.abc”）.attr（“id”，“abc”+id）.end（）
.find（“.def”）.attr（“id”，“def”+id）.end（）
.find（“.ghi”）.attr（“id”，“ghi”+id）.end（）
.插入者（部门）；
隐藏分区（）；
日志（$（“[id^='xyz']：可见”）[0].outerHTML）；
});

新增
你累了什么？JS/jQ在哪里？如果你有时间发布它，请在欢迎StackOverflow中发布！你应该尝试自己编写代码。如果你有问题，你可以发布你尝试过的内容，清楚地解释哪些内容不起作用，并提供一个解决方案。我建议读一个好问题。还有，一定要带上。你累了什么？JS/jQ在哪里？如果你有时间发布它，请在欢迎StackOverflow中发布！你应该尝试自己编写代码。如果你有问题，你可以发布你尝试过的内容，清楚地解释哪些内容不起作用，并提供一个解决方案。我建议读一个好问题。还有，一定要带上。非常感谢兄弟。非常感谢兄弟。