Wie man JQuery klont () und die ID ändert

Ich muss die ID klonen und dann eine Nummer hinzufügen, wie id1, id2, usw. Jedes Mal, wenn du klon triffst, legst du den Klon nach der letzten Nummer der ID.

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

Update: Wie Roko C.Bulijan aufgezeigt hat , müssen Sie .insertAfter verwenden, um es nach dem ausgewählten div einzufügen. Sehen Sie auch den aktualisierten Code, wenn Sie möchten, dass er an das Ende angehängt wird und nicht, wenn er mehrfach geklont wird. 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 }); 

Versuchen,

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

Wenn Sie einen automatischen Zähler möchten, dann sehen Sie unten,

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

Ich habe eine verallgemeinerte Lösung erstellt. Die folgende function ändert die IDs und Namen von geklonten Objekten. In den meisten Fällen benötigen Sie die Zeilennummer. Fügen Sie einfach das Attribut “Daten-Zeilen-ID” zum Objekt hinzu.

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