Wie klone ich jQuery () und ändere die ID?

127

Ich brauche die ID zu klonen und dann eine Nummer hinzufügen , nachdem es so gerne id1, id2usw. Jedesmal , wenn man getroffen Klon Sie den Klon setzten nach der letzten Nummer der ID.

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

Antworten:

209

$('#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>


Verschlüsselte Elemente, höchste ID abrufen

Angenommen, Sie haben viele Elemente mit IDs wie, klon--5aber verschlüsselt (nicht in der richtigen Reihenfolge). Hier können wir nicht für :lastoder gehen :first, deshalb brauchen wir einen Mechanismus, um die höchste ID abzurufen:

const $all = $('[id^="klon--"]');
const maxID = Math.max.apply(Math, $all.map((i, el) => +el.id.match(/\d+$/g)[0]).get());
const nextId = maxID + 1;

console.log(`New ID is: ${nextId}`);
<div id="klon--12">12</div>
<div id="klon--34">34</div>
<div id="klon--8">8</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Roko C. Buljan
quelle
2
+1 für Working Demo :) und Danke, dass du dir meine Antwort angesehen hast. Ich habe den Beitrag aktualisiert und eine funktionierende Demo hinzugefügt. Jsfiddle.net/HGtmR/4
Selvakumar Arumugam
Ist es auch möglich, eine Schaltfläche in der Div zu haben, die die aktuelle ID Div entfernt?
user1324780
1
@ user1324780 Ja, das ist möglich, aber du solltest das als neue Frage posten. Wie auch immer, der Schlüssel ist, das .closest(div[id^=id])und .removedas Div zu finden .
Selvakumar Arumugam
1
passen perfekt zu meinem Bedürfnis. Es hat mir höchstwahrscheinlich Stunden der Entwicklung erspart! danke
Nicolas Manzini
43

Update: Wie Roko C.Bulijan betonte, müssen Sie .insertAfter verwenden, um es nach dem ausgewählten div einzufügen. Sehen Sie sich auch den aktualisierten Code an, wenn Sie möchten, dass er an das Ende angehängt wird, anstatt beim mehrfachen Klonen zu beginnen. 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 wünschen, siehe unten,

   var cloneCount = 1;
   $("button").click(function(){
      $("#id").clone().attr('id', 'id'+ cloneCount++).insertAfter("#id");
   }); 
Selvakumar Arumugam
quelle
18
Sie haben eine großartige Gelegenheit verpasst, sie 'id'+ ++ idin Ihrem Code zu verwenden.
Blazemonger
@ RokoC.Buljan Sie haben Recht, aber die Frage war, wie man den attr des geklonten Elements ändert, und so habe ich das nicht bemerkt .after. Siehe aktualisierte Antwort.
Selvakumar Arumugam
:) +1, um es auf 5 zu runden! ;) nette Verwendung von [id^=id]:lastCongrats.
Roko C. Buljan
Kann dies auch auf Namen angewendet werden?
Optiq
5

Dies ist die einfachste Lösung, die für mich funktioniert.

$('#your_modal_id').clone().prop("id", "new_modal_id").appendTo("target_container");
Hassan Mehmood
quelle
2

Ich habe eine allgemeine Lösung erstellt. Die folgende Funktion ändert IDs und Namen von geklonten Objekten. In den meisten Fällen benötigen Sie die Zeilennummer. Fügen Sie dem Objekt einfach das Attribut "Datenzeilen-ID" 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;
}
Piyush Balapure
quelle
2

Das funktioniert auch

 var i = 1;
 $('button').click(function() {
     $('#red').clone().appendTo('#test').prop('id', 'red' + i);
     i++; 
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="test">
  <button>Clone</button>
  <div class="red" id="red">
  </div>
</div>

<style>
  .red {
    width:20px;
    height:20px;
    background-color: red;
    margin: 10px;
  }
</style>

agxhdf
quelle
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>
Hezal M. Tank
quelle