如何JQuery克隆（）和更改ID

Question

我需要克隆该id，然后像id1，id2等那样添加一个数字。每次击中克隆时，都会将该克隆放在最后一个ID后面。

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

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

Answer 2

更新：作为Roko C.Bulijan指出..你需要使用.insertAfter选定格后，将其插入。如果您希望将其添加到末尾而不是从克隆多次开始，请参阅更新后的代码。 DEMO

代码：

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"); 
    }); 

Answer 3

我创建了一个通用的解决方案。下面的函数将更改克隆对象的ID和名称。在大多数情况下，您需要行号，因此只需将“data-row-id”属性添加到对象。

function renameCloneIdsAndNames(objClone) { 

    if(!objClone.attr('data-row-id')) { 
     console.error('Cloned object must have \'data-row-id\' attribute.'); 
    } 

    if(objClone.attr('id')) { 
     objClone.attr('id', objClone.attr('id').replace(/\d+$/, function(strId) { return parseInt(strId) + 1; })); 
    } 

    objClone.attr('data-row-id', objClone.attr('data-row-id').replace(/\d+$/, function(strId) { return parseInt(strId) + 1; })); 

    objClone.find('[id]').each(function() { 

     var strNewId = $(this).attr('id').replace(/\d+$/, function(strId) { return parseInt(strId) + 1; }); 

     $(this).attr('id', strNewId); 

     if($(this).attr('name')) { 
      var strNewName = $(this).attr('name').replace(/\[\d+\]/g, function(strName) { 
       strName = strName.replace(/[\[\]']+/g, ''); 
       var intNumber = parseInt(strName) + 1; 
       return '[' + intNumber + ']' 
      }); 
      $(this).attr('name', strNewName); 
     } 
    }); 

    return objClone; 
}