.clone() | jQuery API Documentation

Il metodo .clone() esegue una copia profonda dell’insieme degli elementi abbinati, cioè copia gli elementi abbinati così come tutti i loro elementi discendenti e i nodi di testo.

Nota: Per ragioni di prestazioni, lo stato dinamico di alcuni elementi del modulo (es, i dati utente digitati in textarea e le selezioni dell’utente effettuate in un select) non vengono copiati negli elementi clonati. Quando si clonano gli elementi input, lo stato dinamico dell’elemento (ad esempio, i dati inseriti dall’utente negli input di testo e le selezioni effettuate dall’utente in una casella di controllo) viene mantenuto negli elementi clonati.

Quando viene usato insieme ad uno dei metodi di inserimento, .clone() è un modo conveniente per duplicare elementi in una pagina. Considerate il seguente HTML:

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

Come mostrato nella discussione per .append(), normalmente quando un elemento viene inserito da qualche parte nel DOM, viene spostato dalla sua vecchia posizione. Quindi, dato il codice

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

La struttura DOM risultante sarebbe:

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

Per evitare questo e creare invece una copia dell’elemento, si potrebbe scrivere quanto segue:

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

Questo produrrebbe:

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

Nota: Quando si usa il metodo .clone(), è possibile modificare gli elementi clonati o il loro contenuto prima di (ri)inserirli nel documento.

Normalmente, qualsiasi gestore di eventi legato all’elemento originale non viene copiato nel clone. Il parametro opzionale withDataAndEvents ci permette di cambiare questo comportamento, e di fare invece delle copie di tutti i gestori di eventi legati alla nuova copia dell’elemento. A partire da jQuery 1.4, tutti i dati dell’elemento (allegati dal metodo .data()) sono anche copiati nella nuova copia.

Tuttavia, gli oggetti e gli array all’interno dei dati dell’elemento non vengono copiati e continueranno ad essere condivisi tra l’elemento clonato e l’elemento originale. Per copiare in profondità tutti i dati, copiate ciascuno manualmente:

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

A partire da jQuery 1.5, withDataAndEvents può essere opzionalmente arricchito con deepWithDataAndEvents per copiare gli eventi e i dati per tutti i figli dell’elemento clonato.

Nota: Usare .clone() ha l’effetto collaterale di produrre elementi con attributi id duplicati, che dovrebbero essere unici. Dove possibile, si raccomanda di evitare di clonare elementi con questo attributo o di usare invece gli attributi class come identificatori.

Lascia un commento Annulla risposta