jQuery Element klonen

H

hoctar

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

HTML: 
<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.
Code: 
$('ul li:first').clone(true);
 
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:
HTML: 
        <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.
 
mit

Code: 
$('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:

Code: 
	$('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.
 
Zuletzt bearbeitet:
Wenn ich nun die Schablone mit $('ul li:first').html() kopiere, kann ich dann auch die Attribute der innen liegenden Elemente zugreifen?
 
Zuletzt bearbeitet:
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:

Code: 
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>'
);
 
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 :)
 
Zuletzt bearbeitet:
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?
 
hoctar hat gesagt.:
Ich habe es so probiert, leider werden die innen liegenden Elemente nicht mitkopiert.
Code: 
$('ul li:first').clone(true);
Zum Vergrößern anklicken....
....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 ?
Zum Vergrößern anklicken....

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:
Code: 
<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:
Code: 
var superclone=$('ul li:first').clone(true).removeAttr('id')[0];
 
Ähm lol. Ich hatte mich darauf verlassen das er Recht hat :-:)rolleyes:

Es wird mitkopiert:

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

Funktioniert einwandfrei.

Danke Sven. Die Methode von oben ginge aber trotzdem.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück