Clone ein Div und ändern Sie die IDs von ihm und alle seine Kinder eindeutig

Question

Mit JQuery ist es möglich, ein Div wie folgt zu klonen und ändern Sie einen neuen Bezeichner zu seiner ID und alle seine Kinder IDs?

Zum Beispiel würde Ich mag Lage sein, dies zu klonen:

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

Und habe es wie folgt aussehen:

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

Oder soll ich nur meine Struktur zu überdenken und rel Attribute verwenden und wiederverwendbare Klassenerklärungen?

Danke,

Tegan Snyder

Answer 1

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

Und Ihre Ereignisse sehen, ob es irgendwelche angebracht sind. Sie müssen sie reparieren, wenn sie sich auf IDs verlassen.

Answer 2

Wenn Sie nicht wirklich jeden dieser geklonten DIVs per Code identifizieren müssen, würde ich Ihre IDs durch wiederverwendbare Klassen ersetzen. Sonst sieht die Antwort von David Morton so aus, als könnte es den Trick machen.