comment cloner ou dupliquer des champs avec jquery?

Vous pouvez essayer un petit quelque chose comme ça:

 $("a").click(function() { $("div.input.text") .last() .clone() .appendTo($("body")) .find("input").attr("name",function(i,oldVal) { return oldVal.replace(/\[(\d+)\]/,function(_,m){ return "[" + (+m + 1) + "]"; }); }); return false; }); 

Comme démontré ici: http://jsfiddle.net/6Xg4S/

Essentiellement, au clic de votre ancre, il clone la dernière div et l’ajoute au corps (au moins mon exemple s’ajoute au corps – vous pouvez évidemment l’append à quelque chose de plus spécifique ou .insertAfter() le dernier), puis prenez la numéro du milieu du nom et incrémentez-le via un regex replace.

Ceci étant dit, j’aimerais noter que vous n’avez pas besoin de donner des noms uniques à vos entrées: toutes les technologies côté serveur que je voudrais utiliser peuvent traiter plusieurs parameters de requête portant le même nom (par exemple, Java a getParameterValues() qui renvoie un tableau).

EDIT: Voici une version qui ne copie que l’élément d’entrée, en particulier la dernière entrée de la div, met à jour son identifiant et l’ajoute à la fin de la div. Selon votre commentaire, cela ne change plus le nom (bien évidemment, vous pouvez simplement append un appel .attr() supplémentaire comme ci-dessus si vous voulez changer le nom aussi). Oh, et cela définit également la valeur vide (j’ai oublié de le faire ci-dessus).

 $("#extra a").click(function() { var $div = $(this).next(); $div.find("input") .last() .clone() .appendTo($div.append("
")) .val("") .attr("id",function(i,oldVal) { return oldVal.replace(/\d+/,function(m){ return (+m + 1); }); }); return false; }); 

Démo: http://jsfiddle.net/6Xg4S/4/

Tout d’abord, donnez-lui un identifiant pour de meilleures performances de sélecteur, je suppose que foo pour le lien, bar pour le champ:

 function buildId(id) { return 'data[Experience][' + id + '][experience_content]'; } jQuery('#foo').click((function () { var i = 0; return function () { var $bar = jQuery('#bar'); $bar .clone() .attr('id', buildId(i++)) .insertAfter($bar); }; })()); 

Recherchez dans l’API jQuery les méthodes utilisées.

Vous pouvez utiliser la méthode jquery clone (), puis extraire le nom de l’élément réel, puis mettre à jour le nom du nouvel élément. Lire ici pour plus

Heres un exemple

           Clone Me 
 Experience Content   
    

Modifier:

Voici le lien vers le code dans jsfiddle: http://jsfiddle.net/kYwXX/1/