Duplizieren von Elementen mit Hilfe von JQuery clone() | 1/2

  • December 2014
  • webaufstieg
  • Programmierung

Elemente klonen | Teil I

Als erstes muss JQuery im HEAD eingebunden werden.

<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/ jquery.min.js"></script>

Nun klonen wir das erste DIV mit der Klasse „zeile“ und setzen es an das Ende. Im zweiten Teil des Artikels wird zusätzlich die ID hochgezählt um eindeutige DIVs zu erhalten.

//die Klasse "klonen" besitzt immer nur das
//erste Element, um Verdoppeln zu verhindern
 <div id="zeile_1" class="klonen zeile">
  Zeile
 </div>

Button zum klonen erstellen:

<div id="button">+</div>

Jetzt das script für das klonen:

//Neuer Klon wird in $clone geschrieben und dann
//die Klasse ".klonen" entfernt. Nun kann sie
//an die letzte Zeile angefügt werden
//".zeile:last"
<script>
   $(document).ready(function() {
       $('#button').click(function(){
          $clone = $('.klonen').clone(true).removeClass('klonen');
          $clone.insertAfter(".zeile:last");
       }); 
   });
</script>

Wichtig: „.zeile:last„, sonst kommt es zu Verdopplungen, da nach jedem Element mit Klasse „.zeile“ ein Klon eingefügt wird.

Beitrag teilen

Vorherige Projekte

Dirtlej Dirtsuit - Ihr innovativer Overall

Dirtlej Dirtsuit Der Dirtlej Dirtsuit ist ein Einteiler, der sich vor allem für...

/site/assets/files/1207/webaufstieg-team-mai-2017.jpg

Team von WEBAUFSTIEG wächst weiter

Das Team von WEBAUFSTIEG wächst weiter ... in dem letzten Jahr hat sich sehr viel getan und dafür möchte sich die Geschäftsführung bei allen...

Webdesign in Aalen

Eine starke Präsenz im Internet ist für ein modernes Unternehmen nicht mehr nur ein Aushängeschild, sondern trägt maßgeblich zur Identität bei. Eine...

/site/assets/files/1187/regio-tv-webaufstieg.jpg

Regio TV zu Besuch bei WEBAUFSTIEG

Unser Beitrag im Regio TV gibt es hier zu sehen (ab Minute...