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

  • December 2014
  • webaufstieg
  • Programmierung

Elemente klonen | Teil 2

Das einfache Klonen eines DIVs ist nun bekannt. Jedoch bleiben die IDs immer die gleichen. Diese hoch zu zählenund das DIV somit einzigartig zu machen behandeln wir in diesem Teil.

Als Erstes brauchen wir die letzte ID. Mittels „:last“ springen wir nur zum letzten Element mit der Klasse „.zeile“. Dann nehmen wir den Wert der im Attribut „ID“ des Elements steht. Diesen String speichern wir in eine Variable.

$p = $('.zeile:last').attr('id');

Nun haben wir den String „zeile_1“ erhalten. Um die Zahl hinter „zeile_“ zu isolieren behelfen wir uns der Funktionsplit(), die im unteren Teil näher erläutert wird.

$array = $p.split('_');

Wir haben jetzt ein Array mit den Teilstrings „zeile“ und „1“, da bei allen Unterstrichen „_“ gesplittet wird. Im nächsten Schritt zählen wir den zweiten Teilstring um eins hoch.

$count = ++$array[1];

Zu letzt müssen wir nur noch die ID des neuen DIVs umbenennen.

$clone.attr('id', 'zeile_' + $count);

Hier das ganze Script:

<script>
   $(document).ready(function() {
      $('#button').click(function(){
         //das Auslesen und splitten passiert hier zusammen
         $p = $('.zeile:last').attr('id').split('_');
         //die Zahl wird um 1 hochgezählt und gespeichert
         $count = ++$p[1];
         //nun wird geklont und die Klasse ".klonen" entfernt
         $clone = $('.klonen').clone().removeClass('klonen');
         //Das neue DIV bekommt hier seine neue ID
         $clone.attr('id', 'zeile_' + $count);
         //einfügen an die letzte Zeile
         $clone.insertAfter(".zeile:last");
      }); 
   });
</script>

 

Häufige Fehler:

✦ Script tut nichts. Lösung: Mit einem alert() Befehl die Ursache finden, sollte es wie unten nicht reagieren wurde jQuery im HEAD Teil falsch implementiert.

$(document).ready(function() {
   alert("test");

✦ Beim klonen entsteht nicht nur eine neue Zeile sondern doppelte oder mehrfache. Dies kann 2 Gründe haben.

  1. Beim „insertAfter“ oder „insertBefore“ steht nur die Klasse „.zeile“ die aber bei jedem DIV dabei steht. Dadurch wird die Zeile vor oder nach jedem DIV mit der Klasse eingefügt. Als Resultat klappt das erste Klonen, beim zweiten Mal werden 2 hinzugefügt, beim dritten mal 4 dann 8. Wichtig ist es das „:last“hinzuhängen, also so „.zeile:last“.
  2. Die zu klonende erste Zeile hat keine eigene Klasse wie zum Beispiel bei uns „.klonen“ . Tritt diese häufiger wie einmal auf wird es auch zu mehreren Klonen kommen, darum entfernen wir auch nach dem Klonen und vor dem einsetzen diese Klasse „.klonen“, somit ist sichergestellt das nur ein DIV als Klon genutzt wird.

Nun der gesamte HTML Code:

<html>
<head>
   <script language="JavaScript" type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
   </script>
</head>
<body>
   <div id="zeile_1" class="klonen zeile">Zeile</div>
   <div id="button">+</div>
   <script>
       $(document).ready(function() {
          $('#button').click(function(){
             $p = $('.zeile:last').attr('id').split('_');
             $count = ++$p[1] ;
             $clone = $('.klonen').clone().removeClass('klonen');
             $clone.attr('id', 'zeile_' + $count);
             $clone.insertAfter(".zeile:last");
          });
       });
   </script>
</body>
</html>

 Mehr Infos zur split() Funktion:

Um in Jquery einen String zu splitten / teilen benötigt man lediglich die Funktion split().

   Ein Beispiel wäre wie folgt:

      $daten = $(‚#name‘).text();

      $array = $daten.split(‚_‘);

   Im DIV mit der ID name steht z.B. der Text „Nummer_12“

   Ergebnis wäre dann:

      $array[0] = „Nummer“

      $array[1] = „12“

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...