Changing various id's after cloning in jquery

Question

I'm trying to clone a table row and update the multiple id's to reflect the input fields. I start by doing this and it works:

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

That changes the id of my main table row to the new id. In the table row I have other id's that need to be changed. For example:

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

Will be changed to:

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

I thought it would be something like this to change the id's:

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

This doesn't work. How can I fix this so that all of the id's change?

Answer 1

The program will crash as you have it since you're missing a function call.

Try this instead. Notice the call to find():

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

It will probably be better to reference the clone in a variable first.

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

You can set the ID attributes one at a time for the descendants of your clone if you wish. If there are several, and if you have a consistent pattern for IDs, you will likely be able to do something a little more automated.

---

EDIT:

Here's an example of automatically updating all the IDs in the $clone.

Please note that this may not work for you, as it assumes that all the IDs end with a number.

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