jQuery clone les ID en double

Question

J'ai un élément HTML qui contient une grande collection de listes non ordonnées. J'ai besoin de cloner cet élément pour le placer ailleurs sur la page avec des styles différents (c'est assez simple en utilisant jQuery).

$("#MainConfig").clone(false).appendTo($("#smallConfig"));

Le problème, cependant, est que toutes les listes et les éléments de liste qui leur sont associés ont des ID et des noms de domaine. clone les duplique. Existe-t-il un moyen simple de remplacer tous ces identifiants en double à l'aide de jQuery avant de les ajouter ?

Answer 1

Pour information, j'ai utilisé la fonction de Dario, mais j'avais besoin de capturer également les étiquettes de formulaire.

Pour ce faire, ajoutez une autre déclaration "si" comme celle-ci :

if(element.htmlFor){
var matches = element.htmlFor.match(/(.+)_\d+/);
if(matches && matches.length >= 2)            // Captures start at [1].
  element.htmlFor = matches[1] + "_" + cur_num;
}

Answer 2

Si vous avez plusieurs éléments similaires sur une page, il est préférable d'utiliser des classes, et non des identifiants. Ainsi, vous pouvez appliquer des styles à des uls situés dans des conteneurs d'identifiants différents.

Answer 3

Je crois que c'est la meilleure façon

var $clone = $("#MainConfig").clone(false);
$clone.removeAttr('id'); // remove id="MainConfig"
$clone.find('[id]').removeAttr('id'); // remove all other id attributes
$clone.appendTo($("#smallConfig")); // add to DOM.

Answer 4

Voici une solution avec id.

var clone = $("#MainConfig").clone();
clone.find('[id]').each(function () { this.id = 'new_'+this.id });
$('#smallConfig').append(clone);

si vous souhaitez que l'identifiant soit défini dynamiquement, vous pouvez utiliser le compteur au lieu de 'new_'.