Quando è utile la funzione di clonazione di jQuery?

Una delle sfide dell’apprendimento di una libreria (che si tratti della libreria standard di funzioni fornita con un linguaggio di programmazione o di un progetto di terze parti) è duplice:

1. apprendimento delle funzioni disponibili,
2. imparare a usare dette funzioni.

E, in realtà, a volte anche imparare a utilizzare dette funzioni non è poi così difficile: è sapere quando utilizzare una determinata funzione per ridurre al minimo il codice pur raggiungendo gli obiettivi del progetto.

Funzione di clonazione di jQuery

Un esempio che mi viene in mente è l’uso della funzione clone di jQuery. La definizione della funzione è semplice:

Il metodo .clone() esegue una copia completa dell’insieme di elementi abbinati, il che significa che copia gli elementi abbinati così come tutti i loro elementi discendenti e nodi di testo.

La cosa bella della funzione è che può anche creare una copia "superficiale" della funzione. Ciò significa che puoi copiare gli elementi senza i gestori di eventi, gli elementi figlio e così via.

A seconda delle tue esigenze, uno sarà più prezioso dell’altro. Ma, per questo post, supponiamo che una copia profonda sia ciò che stiamo cercando.

1 Un potenziale caso d’uso

Diciamo che hai un insieme di immagini su una pagina e per ciascuna di queste immagini, devi aggiungere un gestore di eventi in modo che quando si fa clic sull’immagine succeda qualcosa.

• forse viene visualizzata una finestra di dialogo modale,
• forse qualcosa viene inviato al server tramite una richiesta asincrona,
• forse la presentazione della pagina deve cambiare,
• eccetera.

Non lo so. Qualunque sia il tuo caso, supponiamo che tu abbia un’immagine o un insieme di immagini e devi visualizzare una finestra di dialogo modale quando viene cliccata.

2 Impostazione del codice

Per fare ciò, ci sono diverse cose che dobbiamo fare:

1. aggiungi un attributo personalizzato alle immagini in modo da poter allegare gestori di eventi appropriati,
2. impostare un parziale che ha il markup che vogliamo visualizzare con un determinato pezzo di HTML,
3. usando clone per sfruttare sfruttare il parziale che abbiamo scritto e duplicato, se necessario.

Passo 1

Se stai lavorando con WordPress e stai cercando come aggiungere attributi di immagine personalizzati, puoi vedere un tutorial su come farlo in questo post.

Passo 2

Creare un parziale è semplice. Il codice potrebbe essere semplice come il seguente snippet :

<p class="acme-element">
    <span>Acme</span>
</p><!--- .acme-element -->

E sì, potresti vestirlo con un po’ di CSS e aggiungere del codice personalizzato a uno degli elementi usando PHP, ma questo copre le basi assolute.

Passaggio 3

Ora diciamo che per ogni immagine che esiste nella pagina (con un attributo personalizzato come data-type="acme” ), vogliamo aggiungere una copia dell’elemento sopra alla pagina relativa a ciascuna delle immagini nella pagina.

Per fare ciò, dobbiamo sapere:

1. quando si fa clic su un elemento,
2. è l’elemento genitore,
3. e come aggiungere l’elemento usando il metodo clone .

Quindi, per prima cosa, vogliamo rilevare quando si fa clic su una determinata immagine. Per fare ciò, possiamo scorrere tutte le immagini sulla pagina in modo da poter allegare un gestore di eventi personalizzato:

// Loop through each of the image with the custom data-types on the page.
$('img[data-type="acme"]').each(function() {

  // ...

});

Quindi, quando si fa clic sull’immagine, troviamo l’elemento padre dell’immagine su cui è stato fatto clic (e quindi viene eseguita la maggior parte del lavoro ).

Cioè, prendiamo una copia dell’elemento in precedenza nel post, lo cloniamo e lo aggiungiamo al contenitore:

var $this, $parent, $clone;

// Loop through each of the image with the custom data-types on the page.
$('img[data-type="acme"]').each(function() {

  $this = $(this);
  $(this).on('click', function() {

    // Reference the parent of the image that was clicked and clone the element.
    $parent = $this.parent();
    $clone  = $('.acme-element').clone(true);

    // Next, append the cloned element to the parent.
    $parent.append($clone);

  });
});

E poi possiamo lavorare con ciascuno in modo indipendente.

Alcuni trucchi

Quando si clonano elementi, ci sono alcune cose che devi ricordare (che sono menzionate sopra). Nello specifico:

• ricorda che potresti aver bisogno di clonare elementi in modo diverso a seconda del gestore dell’evento,
• potrebbe essere necessario creare ID personalizzati per un determinato elemento prima di aggiungerlo alla pagina,
• forse un elemento deve essere attivato quando si fa clic su qualcosa,
• e così via.

Esistono numerosi modi per gestire un elemento clonato, ma ogni volta che lo fai, assicurati che quando cloni un elemento, stai identificando e gestendo correttamente gli eventi, in modo da non ottenere risultati irregolari.