Làm thế nào để JQuery clone() và thay đổi id

Question

tôi cần phải clone id và sau đó thêm một số sau khi nó như vậy id1, id2 vv Mỗi lần bạn nhấn bản sao bạn đặt các bản sao sau số mới nhất của 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

Cập nhật: Như Roko C.Bulijan chỉ ra .. bạn cần phải sử dụng .insertAfter để chèn nó sau khi div chọn. Ngoài ra, hãy xem mã được cập nhật nếu bạn muốn mã được nối vào cuối thay vì bắt đầu khi được nhân bản nhiều lần. DEMO

Code:

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

---

Cố gắng,

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

Nếu bạn muốn một bộ đếm tự động, sau đó xem dưới đây,

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

Answer 3

Tôi đã tạo ra một giải pháp tổng quát. Hàm bên dưới sẽ thay đổi id và tên của đối tượng nhân bản vô tính. Trong hầu hết các trường hợp, bạn sẽ cần số hàng nên chỉ cần thêm thuộc tính "data-row-id" vào đối tượng.

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