Ich stand heute vor der Herausforderung ein ganzes HTML Konstrukt mehrfach via JavaScript zu duplizieren. Dies kann man auch mit dem clone() Befehl. Allerdings ist alles inklusive class Attribute gleich. Was tun?

Zum einen musste ich ein HTML snippet mehrfach klonen. In einer for Schleife kein Problem.
Aber fangen wir erstmal mit dem HTML an:

1
2
3

<div class="wrapper">
  <div class="cloneobject" id="id0">id0 (clone object)</div>
</div>

Wir haben hier das „cloneobject“, dass mehrfach dupliziert werden soll. Dem gebe ich auch noch eine ID „id0“ mit, die später noch hochgezählt werden soll.
Damit wäre jeder Clone identifizierbar.

Nun das JavaScript (jQuery). Da das neue Objekt immer direkt nach dem Original eingefügt wird, musste ich die „for“ Schleife rückwärts ausführen.
Mit dem „attr“ wird die ID gesetzt. Um es visuell auch darzustellen, lasse ich dieselbe ID auch als Text ausgeben. Müsste man später wieder entfernen.
Da nun jeder Clone eine ID besitzt, kann ich via JS oder CSS auf diesen direkt eingreifen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function() {
    var e = $('.cloneobject');
    // count backwards for the correct order
    for (var i = 5; i > 0; i--) {
      e
      .clone()
      .attr('id', 'id'+ i)
      .insertAfter(e)
      .text('id'+ i); // for testing
    }
 
    // feel free to change the clone
    $('#id3').css( "color", "red" );
});

Nun das CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.cloneobject {
  width: 200px;
  height: 40px;
  margin: 10px auto;
  line-height: 40px;
  text-align: center;
  background: red;
  color: white;
  font-family: sans-serif;
}
#id0 {
  background: darkred;
}
#id3 {
  background: lightblue;
}

Wie das nun final aussieht, kann man hier gleich mal testen: jsfiddle.net/gregor/tx3koLqy/