Cómo hacer jQuery clone () y cambiar id

Necesito clonar la identificación y luego agregar un número como id1, id2, etc. Cada vez que presionas clon, colocas el clon después del último número de la identificación.

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

 $('#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) ); }); 
   
klon1
klon2

Actualización: como señaló Roko C.Bulijan … necesitas utilizar .insertAfter para insertarlo después del div seleccionado. También vea el código actualizado si desea que se agregue al final en lugar de comenzar cuando se clona varias veces. MANIFESTACIÓN

Código:

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

Tratar,

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

Si quieres un contador automático, mira a continuación,

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

He creado una solución generalizada. La siguiente función cambiará los ids y los nombres de los objetos clonados. En la mayoría de los casos, necesitará el número de fila así que simplemente agregue el atributo “data-row-id” al objeto.

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