如何JQuery克隆（）和更改ID

我需要克隆的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 (ie: 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 (ie: 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="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将其插入选定div后面。 如果您希望将其添加到末尾，而不是在克隆多次时开始，请参阅更新后的代码。 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

我创build了一个广义的解决scheme。 下面的函数将更改克隆对象的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; }