.clone() | jQuery API Documentation

De methode .clone() voert een diepe kopie uit van de set gematchte elementen, wat betekent dat het zowel de gematchte elementen als al hun afgeleide elementen en tekstknooppunten kopieert.

Note: Om prestatieredenen wordt de dynamische staat van bepaalde formulierelementen (bijv, gebruikersgegevens die in textarea worden getypt en gebruikersselecties die in een select worden gemaakt) niet naar de gekloonde elementen gekopieerd. Bij het klonen van input-elementen blijft de dynamische status van het element (bijv. gebruikersgegevens die in tekstinvoer zijn getypt en gebruikersselecties die in een selectievakje zijn gemaakt) behouden in de gekloonde elementen.

Wanneer .clone() wordt gebruikt in combinatie met een van de invoegmethoden, is het een handige manier om elementen op een pagina te dupliceren. Beschouw de volgende HTML:

<div class="container">
 <div class="hello">Hello</div>
 <div class="goodbye">Goodbye</div>
</div>

Zoals aangetoond in de discussie voor .append(), normaal gesproken wanneer een element ergens in het DOM wordt ingevoegd, wordt het verplaatst van zijn oude locatie. Dus, gegeven de code:

1	`$( ".hello" ).appendTo( ".goodbye" );`

De resulterende DOM-structuur zou zijn:

<div class="container">
 <div class="goodbye">
 Goodbye
 <div class="hello">Hello</div>
 </div>
</div>

Om dit te voorkomen en in plaats daarvan een kopie van het element te maken, zou je het volgende kunnen schrijven:

1	`$( ".hello" ).clone().appendTo( ".goodbye" );`

Dit zou het volgende opleveren:

<div class="container">
 <div class="hello">Hello</div>
 <div class="goodbye">
 Goodbye
 <div class="hello">Hello</div>
 </div>
</div>

Note: Wanneer u de methode .clone() gebruikt, kunt u de gekloonde elementen of hun inhoud wijzigen voordat u ze (opnieuw) in het document invoegt.

Normaal gesproken worden event handlers die aan het oorspronkelijke element zijn gebonden, niet naar de kloon gekopieerd. De optionele withDataAndEvents parameter stelt ons in staat om dit gedrag te veranderen, en in plaats daarvan ook kopieën te maken van alle event handlers, gebonden aan de nieuwe kopie van het element. Vanaf jQuery 1.4 wordt alle element data (gekoppeld door de .data() methode) ook gekopieerd naar de nieuwe kopie.

Objecten en arrays binnen element data worden echter niet gekopieerd en zullen gedeeld blijven worden tussen het gekloonde element en het originele element. Als je alle gegevens diep wilt kopiëren, moet je ze allemaal handmatig kopiëren:

// Original element with attached data
var $elem = $( "#elem" ).data( "arr", ),
 $clone = $elem.clone( true )
 // Deep copy to prevent data sharing

Aangezien jQuery 1.5 kan withDataAndEvents optioneel worden uitgebreid met deepWithDataAndEvents om de gebeurtenissen en gegevens voor alle kinderen van het gekloonde element te kopiëren.

Note: Het gebruik van .clone() heeft als neveneffect dat elementen worden geproduceerd met dubbele id attributen, die verondersteld worden uniek te zijn. Waar mogelijk wordt aanbevolen om het klonen van elementen met dit attribuut te vermijden of in plaats daarvan class attributen als identifiers te gebruiken.

Geef een reactie Antwoord annuleren