如何克隆和更改ID？

javascript jquery clone

2022-08-30 04:17:36

我需要克隆ID，然后在它后面添加一个数字，就像这样，，等等。每次点击克隆时，您都会将克隆放在ID的最新编号之后。id1id2

$("button").click(function() {
    $("#id").clone().after("#id");
});

答案 1

$('#cloneDiv').click(function(){


  // get the last DIV which ID starts with ^= "klon"
  var $div = $('div[id^="klon"]:last');

  // Read the Number from that DIV's ID (i.e: 3 from "klon3")
  // And increment that number by 1
  var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;

  // Clone it and assign the new ID (i.e: from num 4 to ID "klon4")
  var $klon = $div.clone().prop('id', 'klon'+num );

  // Finally insert $klon wherever you want
  $div.after( $klon.text('klon'+num) );

});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<button id="cloneDiv">CLICK TO CLONE</button> 

<div id="klon1">klon1</div>
<div id="klon2">klon2</div>

加扰元素，检索最高 ID

假设您有许多元素的ID像，但打乱了（不按顺序）。在这里，我们不能选择 or ，因此我们需要一种机制来检索最高的 ID：klon--5:last:first

const all = document.querySelectorAll('[id^="klon--"]');
const maxID = Math.max.apply(Math, [...all].map(el => +el.id.match(/\d+$/g)[0]));
const nextId = maxID + 1;

console.log(`New ID is: ${nextId}`);

<div id="klon--12">12</div>
<div id="klon--34">34</div>
<div id="klon--8">8</div>

答案 2

更新：正如Roko C.Bulijan所指出的那样。您需要使用 .insertAfter 将其插入到所选 div 之后。如果您希望将更新的代码追加到末尾而不是在多次克隆时开始，另请参阅更新的代码。演示

法典：

   var cloneCount = 1;;
   $("button").click(function(){
      $('#id')
          .clone()
          .attr('id', 'id'+ cloneCount++)
          .insertAfter('[id^=id]:last') 
           //            ^-- Use '#id' if you want to insert the cloned 
           //                element in the beginning
          .text('Cloned ' + (cloneCount-1)); //<--For DEMO
   });

尝试

$("#id").clone().attr('id', 'id1').after("#id");

如果你想要一个自动计数器，那么见下文，

   var cloneCount = 1;
   $("button").click(function(){
      $("#id").clone().attr('id', 'id'+ cloneCount++).insertAfter("#id");
   });