Question

183

Changing various id's after cloning in jquery

rated 0 times [ 187] [ 4] / answers: 1 / hits: 22466 / 14 Years ago, fri, june 4, 2010, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

monetm

Add To Favorites

Follow

Total Points: 615

Total Questions: 103

Total Answers: 119

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

monetm questions

1 How to protect API routes in Next.js?

Fri, Feb 26, 21, 00:00, 3 Years ago

1 React props for passing color

Wed, Sep 9, 20, 00:00, 4 Years ago

1 How to catch the error when making fetch api request?

Sun, Jul 26, 20, 00:00, 4 Years ago

1 How to stop propagation on Link elements from React-Router-Dom?

Thu, Jul 2, 20, 00:00, 4 Years ago

1 Wait for an xpath in Puppeteer

Thu, Jun 11, 20, 00:00, 4 Years ago

View All

answered 14 Years ago maryann · Accepted Answer

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

});