JQuery klonlama() ve kimliği değiştirme

Question

Kimliği kopyalamam ve sonra da bir numarayı eklemem gerekir böylece id1, id2, vb. Her klonla vurduğunuzda, klonu en son kimlik numaranından sonra koyun.

$("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

Güncelleme: işaretRoko C.Bulijan gibi .. seçilen div sonra eklemek için .insertAfter kullanmak gerekir. Ayrıca, birden çok kez klonlandığı zaman baştan sona eklenmesini istiyorsanız güncellenmiş kodlara da bakın. DEMO

Kodu:

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

---

deneyin, bir otomatik sayaç istiyorsanız

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

, o zaman, aşağıya bakınız

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

Answer 3

Ben genel bir çözüm yarattık. Aşağıdaki işlev, kimlikleri ve klonlanan nesnenin isimlerini değiştirecektir. Çoğu durumda, satır numarasına ihtiyacınız olacak, sadece nesneye "data-row-id" özniteliğini ekleyin.

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