Clone a div and change the ID's of it and all it's children to be unique

Question

Using JQuery it possible to clone a Div like this and change add a new identifier to it's ID and all it's children ID's?

For instance I'd like to be able to clone this:

<div id="current_users">
<table id="user_list">
<tr id="user-0">
<td id="first_name-0">Jane</td>
<td id="last_name-0">Doe</td>
</tr>
<tr id="user-1">
<td id="first_name-1">John</td>
<td id="last_name-1">Doe</td>
</tr>
</table>
</div>

And have it look like this:

<div id="current_users_cloned">
<table id="user_list_cloned">
<tr id="user-0_cloned">
<td id="first_name-0_cloned">Jan</td>
<td id="last_name-0_cloned">Doe</td>
</tr>
<tr id="user-1_cloned">
<td id="first_name-1_cloned">John</td>
<td id="last_name-1_cloned">Doe</td>
</tr>
</table>
</div>

Or should I just rethink my structure and use rel attributes and reusable class declarations?

Thanks,

Tegan Snyder

Answer 1

$("#current_users").clone(false).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + "_cloned"); });

And watch your events if there are any attached. You'll have to fix them up if they rely on ids.

Answer 2

Unless you actually need to uniquely identify each of those cloned DIV's via code, I would replace your ID's with reusable classes. Otherwise, David Morton's answer looks like it might do the trick.

Answer 3

David Morton had the right answer back in 2010, but I just wanted to update it. jQuery removed .andSelf() in 3.0.0 (see adeneo's answer ). The latest and greatest (as of this writing) is .addBack() . So the line would be:

$("#current_users").clone(false).find('*[id]').addBack().each(function () { $(this).attr('id', function(i , id) { return id + "_cloned" + ruleId}) });

If you need to get it back as a string, which was the case for me, add .get(0).outerHTML; to the end.