Clona un div e cambia l'ID di esso e tutti i suoi figli per essere univoci

Question

Utilizzando JQuery è possibile clonare un Div come questo e cambiare aggiungere un nuovo identificatore al suo ID e tutti i suoi ID figli?

Per esempio mi piacerebbe essere in grado di clonare questo:

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

E hanno apparire come questo:

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

O devo solo ripensare la mia struttura e utilizzare gli attributi rel e dichiarazioni di classe riutilizzabili?

Grazie,

Tegan Snyder

Answer 1

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

e guardare i tuoi eventi se ci sono attaccati. Dovrai risolverli se si basano su id.

Answer 2

A meno che non sia effettivamente necessario identificare in modo univoco ciascuno di questi DIV clonati tramite codice, sostituirei l'ID con classi riutilizzabili. Altrimenti, la risposta di David Morton sembra che potrebbe fare il trucco.