Astuce JQuery du jour : la fonction clone()

JQuery propose par défaut des tas de fonctions super utiles mais qui sont assez peu utilisées. J’ai découvert la fonction clone il y a peu (en jetant un oeil sur mon mémento JQuery 1.4). Tu l’as peut-être deviné, la fonction clone() permet de dupliquer un élément du DOM dans la page.

Comme d’hab, je t’ai préparé une petite démo :

Demo

Pour mon exemple on va dupliquer une liste déroulante <select> (en fait tout le paragraphe qui le contient) pour permettre à l’utilisateur de sélectionner plusieurs catégories :

     <label for="categorie">Choisissez une catégorie :</label>
<select class="cat" name="categorie[]">
          <option>Sélectionnez une catégorie</option>
          <option value="jquery">JQuery</option>
          <option value="html">HTML</option>
          <option value="php">PHP</option>
          <option value="css">CSS</option>
     </select>

Les crochets à la fin de l’attribut name du select nous permettra de récupérer les valeurs des plusieurs select dupliqués en faisant un simple foreach (en PHP).

Passons maintenant à la partie JQuery (attention ça va aller très vite !) :

$(document).ready(function() {
     $('select.cat:last').live('change',function(){
          if( $(this).val() != '' )
          {
               $(this).parent().clone(true).insertAfter($(this).parent());
          }
     });
});

Et voilà ! Comme tu le sais probablement déjà la ligne 1 permet d’attendre que la page soit fini de charger (que le DOM soit ready).

A la ligne 2, le sélecteur select.cat:last permet de sélectionner uniquement le dernier select ayant la classe « cat ». Pour plus de renseignements sur l’événement « live », je t’invite à relire mon précédent article sur ce sujet. Donc quand la valeur de ce dernier select change, on exécute la suite.

La ligne 3 permet de tester si la valeur du select n’est pas vide.

L’astuce du jour se trouve véritablement à la ligne 5. Tout d’abord on sélectionne le parent du select (.parent()). On a donc tout le paragraphe. Ensuite on clone ce paragraphe (.clone()) et on l’insère après (insertAfter()) le paragraphe contenant le dernier select.

Ce n’était pas si compliqué que ça ? ;)

Et enfin, et parce que je suis super sympa, voici comment on récupère les valeurs en PHP de tous les select générés :

if( !empty( $_POST['categorie'] ) )
{
     foreach( $_POST['categorie'] as $categorie )
     {
          echo $categorie . '
';
          // faire ici le traitement voulu, le foreach va parcourir toutes les catégories du tableau
     }
}

Voili, voilou (comme dirait Flanders), c’était le retour des articles avec plein de JQuery dedans. Tiens-toi prêt, j’ai d’autres petites astuces en stock ! ;)

Pas encore de billet sur le même sujet !

Cette entrée a été publiée dans JQuery, avec comme mot(s)-clef(s) , . Vous pouvez la mettre en favoris avec ce permalien.

6 reponses a Astuce JQuery du jour : la fonction clone()

  1. Alban dit :

    Je suis de loin pas un spécialiste en javascript (encore encore moins en jQuery) mais un jour j’ai eu besoin de faire ceci, et j’ai réussi quelque chose de semblable (du moins il me semble, mais à toi de me corriger, si je n’ai pas vu la subtilité) avec quelque chose du type :
     » var Nom = document.getElementById(‘usname’).innerHTML;
    document.write(Nom);  »
    Où usname était un div contenant un lien (et un span, mais on s’en fou en fait du span) autour d’un Pseudo.

    Merci de m’éclairer.

  2. arnaud dit :

    Ça correspond plus ou moins à ce que j’ai présenté, à un détail près : grâce à l’événement live de JQuery, on peut ajouter l’événement sur le select qui vient d’être créé avec JQuery. Comme cela on peut juste mettre l’événement sur le dernier select !

  3. Lonnie Andon dit :

    Hello there, can we place that article to our web-site?

  4. Meche dit :

    Merci beaucoup pour ce script, c’est exactement ce que je chercher, sauf que je voulais un bouton pour ajouter une ligne, mais finalement, l’utilisateur gagne du temps avec la création du nouveau SELECT dès qu’un choix est effectué.

    J’ai essayer d’utiliser la méthode Clone à l’aide de la doc de Jquery, et je n’y étais pas arrivé.

    Merci encore

  5. Laurent dit :

    Bonsoir / Bonjour !

    Est-il possible en utilisant la fonction clone de jQuery d’enregistrer les résultats dans une table SQL sous forme d’ajout indépendant ?! Je veux dire par là, que chaque valeur de la colonne « Catégorie » possèderait sont propre ID auto incrémenté. Si oui, HOW TO ???
    Merci pour votre aide !

  6. Topheur dit :

    Bonjour,
    est il possible de dupliquer plusieurs champs en cliquant simplement sur un lien.
    L’idée est de permettre a mes utilisateur de saisir plusieurs adresses de contact et donc en cliquant sur le lien (ajouter un adresse) le champs, nom, prénom, adresse1, adresse 2, cp, ville, seront dupliqué.
    Merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">