Quand la fonction Clone de jQuery est-elle utile ?

L’un des défis de l’apprentissage d’une bibliothèque (qu’il s’agisse de la bibliothèque standard de fonctions fournies avec un langage de programmation ou d’un projet tiers) est double :

1. apprendre les fonctions disponibles,
2. apprendre à utiliser lesdites fonctions.

Et, vraiment, parfois même apprendre à utiliser ces fonctions n’est pas si difficile – il s’agit de savoir quand utiliser une fonction donnée pour aider à minimiser le code tout en atteignant les objectifs du projet.

Fonction de clonage de jQuery

Un exemple qui me vient à l’esprit est l’utilisation de la fonction clone de jQuery. La définition de la fonction est simple :

La méthode .clone() effectue une copie complète de l’ensemble des éléments correspondants, ce qui signifie qu’elle copie les éléments correspondants ainsi que tous leurs éléments descendants et nœuds de texte.

La bonne chose à propos de la fonction est qu’elle peut également créer une copie "superficielle" de la fonction. Cela signifie que vous pouvez copier les éléments sans les gestionnaires d’événements, les éléments enfants, etc.

Selon vos besoins, l’un sera plus précieux que l’autre. Mais, pour ce post, supposons qu’une copie complète est ce que nous recherchons.

1 Un cas d’utilisation potentiel

Disons que vous avez un ensemble d’images sur une page et pour chacune de ces images, vous devez ajouter un gestionnaire d’événements afin que lorsque l’on clique sur l’image, quelque chose se passe.

• peut-être qu’une boîte de dialogue modale apparaît,
• peut-être que quelque chose est envoyé au serveur via une requête asynchrone,
• peut-être que la présentation de la page doit changer,
• etc.

Je ne sais pas. Quel que soit votre cas, disons que vous avez une image ou un ensemble d’images et que vous devez afficher une boîte de dialogue modale lorsque vous cliquez dessus.

2 Configuration du code

Pour ce faire, il y a plusieurs choses que nous devons faire :

1. ajoutez un attribut personnalisé aux images afin que nous puissions attacher les gestionnaires d’événements appropriés,
2. mettre en place un partiel qui a le balisage que nous voulons afficher avec un morceau de HTML donné,
3. utiliser clone pour tirer parti du partiel que nous avons écrit et dupliqué, si nécessaire.

Étape 1

Si vous travaillez avec WordPress et cherchez comment ajouter des attributs d’image personnalisés, vous pouvez voir un tutoriel sur la façon de le faire dans ce post.

Étape 2

Créer un partiel est simple. Le code pourrait être aussi simple que l’extrait suivant :

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

Et oui, vous pouvez l’habiller avec un peu de CSS et ajouter du code personnalisé à l’un des éléments en utilisant PHP, mais cela couvre les bases absolues.

Étape 3

Supposons maintenant que pour chaque image qui existe sur la page (avec un attribut personnalisé tel que data-type="acme" ), nous souhaitons ajouter une copie de l’élément ci-dessus à la page associée à chacune des images de la page.

Pour ce faire, nous devons savoir :

1. lorsqu’un élément est cliqué,
2. c’est l’élément parent,
3. et comment ajouter l’élément à l’aide de la  méthode clone.

Donc, d’abord, nous voulons détecter quand une image donnée est cliquée. Pour ce faire, nous pouvons parcourir toutes les images de la page afin de pouvoir attacher un gestionnaire d’événements personnalisé :

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

  // ...

});

Ensuite, lorsque l’on clique sur l’image, on trouve l’élément parent de l’image qui a été cliqué (et ensuite le gros du travail se fait).

Autrement dit, nous prenons une copie de l’élément plus tôt dans le message, le clonons et l’ajoutons au conteneur :

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);

  });
});

Et puis nous pouvons travailler avec chacun indépendamment.

Quelques pièges

Lors du clonage d’éléments, il y a quelques points dont vous devez vous souvenir (qui sont mentionnés ci-dessus). Spécifiquement:

• rappelez-vous que vous pouvez avoir besoin d’éléments clones différemment selon le gestionnaire d’événements,
• vous devrez peut-être créer des identifiants personnalisés pour un élément donné avant de l’ajouter à la page,
• peut-être qu’un élément doit être basculé lorsque quelque chose est cliqué,
• etc.

Il existe de nombreuses façons de gérer un élément cloné, mais chaque fois que vous le faites, assurez-vous que lorsque vous clonez un élément, vous identifiez et gérez correctement les événements, afin de ne pas obtenir de résultats erratiques.