Modification de divers ID après le clonage dans jquery

Je suis en train de cloner une ligne de la table et de mettre à jour les multiples id afin de refléter les champs de saisie. Je commence par faire ceci et cela fonctionne:

$(id).clone().attr("id", "newId");

Qui change l'id de ma table principale ligne de la nouvelle carte d'identité. Dans la ligne de la table j'ai d'autres id besoin d'être changé. Par exemple:

<input type="text" id="input_1">

Sera changé:

<input type="text" id="input_2">

Je pensais que ce serait quelque chose comme ça à changer les id:

$(id).clone().attr("id", "newId").("#input_1").attr("id", "input_2");

Cela ne fonctionne pas. Comment puis-je résoudre ce problème de manière que tous les id de changement?

source d'informationauteur rshivers

  1. 29

    Le programme se crash comme vous l'avez puisque vous êtes en manque un à l'appel de la fonction.

    Essayez plutôt ceci. Notez que l'appel à find():

    $(id).clone().attr("id", "newId").find("#input_1").attr("id", "input_2");

    Il sera probablement préférable de référence le clone dans une variable de première.

    var $clone = $(id).clone();

$clone.attr("id", "newId").find("#input_1").attr("id", "input_2");
$clone.find("#someElement").attr("id","someElement_2");
$clone.find("#someOtherElement").attr("id","someOtherElement_2");

    Vous pouvez définir les attributs ID une par une les descendants de votre clone si vous le souhaitez. Si y en a plusieurs, et si vous avez un modèle cohérent pour les Id, vous serez probablement en mesure de faire quelque chose d'un peu plus automatisé.

    EDIT:

    Voici un exemple de mettre à jour automatiquement tous les Identifiants dans le $clone.

    Veuillez noter que cela peut ne pas fonctionner pour vous, car il suppose que tous l'Id de la fin, avec un nombre.

    var $clone = $(id).clone();    //Create your clone

      //Get the number at the end of the ID, increment it, and replace the old id
$clone.attr('id',$clone.attr('id').replace(/\d+$/, function(str) { return parseInt(str) + 1; }) ); 

     //Find all elements in $clone that have an ID, and iterate using each()
$clone.find('[id]').each(function() { 

     //Perform the same replace as above
    var $th = $(this);
    var newID = $th.attr('id').replace(/\d+$/, function(str) { return parseInt(str) + 1; });
    $th.attr('id', newID);
});
  2. 1

    J'ai trouvé quand j'ai fais beaucoup de .clone() stuff il est préférable d'utiliser une classe plutôt que d'un attribut id. De cette façon, vous pouvez cloner, encore de référence par une entité connue (la classe), et encore obtenir unique par le biais d'un indice de l'élément du groupe via un .eq()

  3. 0

    J'ai créé une solution universelle. La fonction ci-dessous va changer les id et les noms de l'objet cloné. Dans la plupart des cas, vous aurez besoin du numéro de ligne si Juste ajouter "data-ligne-attribut id de l'objet. 

    function renameCloneIdsAndNames( objClone ) {
if( !objClone.attr( 'data-row-id' ) ) {
console.error( 'Cloned object must have \'data-row-id\' attribute.' );
}
if( objClone.attr( 'id' ) ) {
objClone.attr( 'id', objClone.attr( 'id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } ) );
}
objClone.attr( 'data-row-id', objClone.attr( 'data-row-id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } ) );
objClone.find( '[id]' ).each( function() {
var strNewId = $( this ).attr( 'id' ).replace( /\d+$/, function( strId ) { return parseInt( strId ) + 1; } );
$( this ).attr( 'id', strNewId );
if( $( this ).attr( 'name' ) ) {
var strNewName  = $( this ).attr( 'name' ).replace( /\[\d+\]/g, function( strName ) {
strName = strName.replace( /[\[\]']+/g, '' );
var intNumber = parseInt( strName ) + 1;
return '[' + intNumber + ']'
} );
$( this ).attr( 'name', strNewName );
}
});
return objClone;
}