# jQuery Element klonen



## hoctar (19. November 2009)

Hallo 

Ich möchte gerne das li Element kopieren und die Attribute der innen liegenden Elemente ändern.
Z.B. soll das img src verändert werden.


```
<ul>
        <li id="20">
          <img src="bild.jpg"></img>
          <div class="con">
                <div class="left"><img src="klick.png"></div>
          </div>
        </li>
</ul>
```
 Ich habe es so probiert, leider werden die innen liegenden Elemente nicht mitkopiert.

```
$('ul li:first').clone(true);
```


----------



## Avorin (19. November 2009)

dann clone doch erst das parent und das child und inserte es in das geklonte parent.


----------



## hoctar (19. November 2009)

Hm, gibt es vllt. eine andere Möglichkeit, als alle Elemente zu klonen ?
Wenn dieser li Kontainer später sehr groß wird, möchte ich ungern alle innen liegenden Elemente klonen.

Wäre es denn nicht Möglich diesen Teil:

```
<li id="20">
          <img src="bild.jpg"></img>
          <div class="con">
                <div class="left"><img src="klick.png"></div>
          </div>
        </li>
```

als eine art Schablone einzulesen und immer wieder zu verändern ?

Ich lade per ajax Bilder, die in diese Schablone eingesetzt und auf der Seite angezeigt werden soll.


----------



## Avorin (19. November 2009)

mit 


```
$('ul li:first').html();
```

bekommst du den kompletten inhalt des li Elements. Das wäre dann deine Schablone. Du müsstest nur noch das <li> </li> drumspannen, aber das ist ja simpel.

Gruß

Avorin

Edit:


```
$('ul').append("<li>" + $('ul li:first').html() + "</li>");
```

so wird natürlich immer von :first geklont. könnte man mit der id aber auch variabel gestalten(bsw wenn sich die id immer um 10 erhöht(20,30,40) einfach ul #meineid und meine id nach jedem vorgang um 10 erhöhen, das wieder in eine schleife und gut.


----------



## hoctar (19. November 2009)

Wenn ich nun die Schablone mit $('ul li:first').html() kopiere, kann ich dann auch die Attribute der innen liegenden Elemente zugreifen?


----------



## Avorin (19. November 2009)

Du bekommst als String folgendes:

<img src="bild.jpg"></img>
<div class="con">
         <div class="left"><img src="klick.png"></div>
</div>

du könntest diesen verändern.

oder einfacher:


```
var Pfad1="deinPfad";
var Pfad2="deinAndererPfad";

$('ul').append(
'<li>' +
'<img src="' + Pfad1 + '"></img>' +
'<div class="con">'+
         '<div class="left"><img src="' + Pfad2 + '"></div>' +
'</div>' +
'</li>'
);
```


----------



## hoctar (19. November 2009)

Kann ich mich denn nicht in der Schablone wie in DOM bewegen ?
Ich möchte die ganze Schablone nicht gerne in Javascript stehen haben, sondern als DOM laden und mich z.B. per next() durch die Elemente bewegen.

Edit:
Ich werde jetzt zu Bett gehe und morgen wieder reinschauen, aber Danke schonmal für deine Vorschläg


----------



## Avorin (19. November 2009)

Das weis ich nicht genau, musst du mal testen.
Aber was spricht dagegen die Schablone im JS stehen zu haben?
Ist die absolut einfachste Methode -> Die Pfade kannst du ja per Ajax laden und einfügen -> was spricht dagegen?


----------



## Sven Mintel (19. November 2009)

hoctar hat gesagt.:


> Ich habe es so probiert, leider werden die innen liegenden Elemente nicht mitkopiert.
> 
> ```
> $('ul li:first').clone(true);
> ```


....bist du dir da sicher?



> Hm, gibt es vllt. eine andere Möglichkeit, als alle Elemente zu klonen ?
> Wenn dieser li Kontainer später sehr groß wird, möchte ich ungern alle innen liegenden Elemente klonen.
> 
> Wäre es denn nicht Möglich diesen Teil:[..........]
> als eine art Schablone einzulesen und immer wieder zu verändern ?



clone() erstellt diese Schablone...der Klon steht in keiner Beziehung mehr zu seinem Ursprungselement. Du kannst von diesem Klon wiederum so viele Kopien "ziehen", wie du willst(nicht den Original-Klon ins Dokument zurückführen, dann is die Schablone futsch).
Du solltest aber die ID des <li> aus der Schablone entfernen...die wäre ja nicht eindeutig, wenn du einen Klon wieder einfügst.

Hier mal nen Beispiel:

```
<body>
<ul>
        <li id="20">
          <img src="bild.jpg">
          <div class="con">
                <div class="left"><img src="klick.png"></div>
          </div>
        </li>
</ul>
<script type="text/javascript">
  var superclone=$('ul li:first').clone(true).removeAttr('id');
  for(i=0;i<10;++i)
  {
    $('ul:first').append(superclone.clone(true).attr('id','clone'+i));
  }
</script>
</body>
```

Attribute kannst du in den Kopien auch ändern und dich darin umherbewegen...allerdings nicht wie im DOM, sondern wie in jQuery(die Klone sind JQuery-Objekte)

Um ein DOM-Element zu erhalten, erstelle den Klon so:

```
var superclone=$('ul li:first').clone(true).removeAttr('id')[0];
```


----------



## Avorin (19. November 2009)

Ähm lol. Ich hatte mich darauf verlassen das er Recht hat :-rolleyes:

Es wird mitkopiert:


```
$('ul li:first').clone(true).appendTo('ul');
```

Funktioniert einwandfrei.

Danke Sven. Die Methode von oben ginge aber trotzdem.


----------



## hoctar (19. November 2009)

Avorin hat gesagt.:


> Aber was spricht dagegen die Schablone im JS stehen zu haben?
> Ist die absolut einfachste Methode -> Die Pfade kannst du ja per Ajax laden und einfügen -> was spricht dagegen?



Wenn ich die ganze Schablone in JS schreiben, wird es nach einiger Zeit unübersichtlich, da denke ich, ist es besser die Schablone außerhalb JS zu schreiben.
Und hinzukommt, das die Eventhandler nicht erstellt werden, wenn ich die Schablone aus JS einfüge.

@Sven
Die id des li wird aus der Datenabank geladen.
Leider kann ich mich ja auch nicht durch den Superclone bewegen.
Zumindest klappt dies nicht:


```
var superclone = $('ul li:first').clone(true).removeAttr('id');
var t = superclone.clone(true).next().attr('tagName');
alert(t);
```


----------



## Quaese (19. November 2009)

Hi,

mit *next* ermittelst du das nächste Element auf der gleichen Ebene. Dort befindet sich in deinem Fall jedoch kein Element.

Willst du die Kinder des Elements ermitteln, gibt es z.B. die Methode children.

Ciao
Quaese


----------

