Cambiare vari ID dopo la clonazione in jquery

Question

Sto provando a clonare una riga della tabella e aggiornare gli ID multipli per riflettere i campi di input. Comincio facendo questo e funziona:

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

che cambia l'id del mio riga della tabella principale per il nuovo ID. Nella riga della tabella ho altri ID che devono essere cambiati. Per esempio:

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

verrà modificato in:

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

ho pensato che sarebbe stato qualcosa di simile per modificare l'ID di:

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

Questo non funziona. Come posso risolvere questo problema in modo che tutti i cambiamenti dell'ID?

Answer 1

Il programma si arresta in modo anomalo visto che manca una chiamata di funzione.

Prova questo. Si noti la chiamata a find():

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

probabilmente sarà meglio fare riferimento il clone in una variabile prima.

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

Se lo desideri, puoi impostare gli attributi ID uno alla volta per i discendenti del tuo clone. Se ce ne sono diversi, e se si dispone di un modello coerente per gli ID, è probabile che si possa fare qualcosa di un po 'più automatico.

---

EDIT:

Ecco un esempio di aggiornare automaticamente tutti gli ID nel $clone.

Si prega di notare che questo non può funzionare per voi, in quanto presuppone che tutti gli ID terminano con un numero.

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

Answer 2

Ho trovato quando faccio un sacco di materiale .clone() è meglio usare una classe piuttosto che un attributo id. In questo modo è possibile clonare, ma fare riferimento a un'entità conosciuta (la classe), e ottenere univoci tramite un indice nel gruppo di elementi tramite .eq()

Answer 3

Ho creato una soluzione generalizzata. La funzione seguente cambierà ID e nomi dell'oggetto clonato. Nella maggior parte dei casi, avrai bisogno del numero di riga in modo da aggiungere l'attributo "data-row-id" all'oggetto.

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