Cambiar varios id después de la clonación en jquery

Question

Estoy intentando clonar una fila de la tabla y actualizar los múltiples identificadores para reflejar los campos de entrada. Comienzo por hacer esto y funciona:

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

que cambia el ID de mi fila de la tabla principal a la nueva identificación. En la fila de la tabla, tengo otras identificaciones que deben cambiarse. Por ejemplo:

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

se cambiará a:

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

pensé que sería algo como esto para cambiar los identificadores:

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

Esto no funciona. ¿Cómo puedo solucionar esto para que todos los ID cambien?

Answer 1

El programa se bloqueará como lo tienes ya que te está faltando una llamada a la función.

Pruebe esto en su lugar. Note la llamada a find():

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

es probable que sea mejor para hacer referencia al clon en una variable en primer lugar.

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

Puede establecer los atributos de ID de uno en uno para los descendientes de su clon si lo desea. Si hay varios, y si tiene un patrón consistente para las identificaciones, es probable que pueda hacer algo un poco más automatizado.

---

EDIT:

He aquí un ejemplo de actualizar automáticamente todos los identificadores en el $clone.

Tenga en cuenta que esto puede no funcionar para usted, ya que supone que todos los los ID terminan con un número.

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

He encontrado que cuando hago un montón de cosas .clone() es mejor usar una clase en lugar de un atributo de identificación. De esta manera puede clonar, sin embargo, hacer referencia a una entidad conocida (la clase), y aún así ser único a través de un índice en el grupo de elementos a través de .eq()

Answer 3

He creado una solución generalizada. La siguiente función cambiará los ids y los nombres de los objetos clonados. En la mayoría de los casos, necesitará el número de fila así que simplemente agregue el atributo "data-row-id" al objeto.

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