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.
$('#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 1var 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));});
<scriptsrc="https://code.jquery.com/jquery-3.1.0.js"></script><buttonid="cloneDiv">CLICK TO CLONE</button><divid="klon1">klon1</div><divid="klon2">klon2</div>
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}`);
+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");});
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.
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.
$('#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 1var 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));});
.closest(div[id^=id])
und.remove
das Div zu finden .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:
Versuchen,
Wenn Sie einen automatischen Zähler wünschen, siehe unten,
quelle
'id'+ ++ id
in Ihrem Code zu verwenden..after
. Siehe aktualisierte Antwort.[id^=id]:last
Congrats.Dies ist die einfachste Lösung, die für mich funktioniert.
quelle
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.
quelle
Das funktioniert auch
quelle
quelle