Cloner un div et de changer l'ID d'elle et de tous les enfants à être unique

À l'aide de JQuery-il possible de cloner un Div comme cela et changer d'ajouter un nouvel identifiant de l'ID et de tous les enfants de l'ID?

Par exemple, je voudrais être en mesure de cloner ce:

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

Et ont ressembler à ceci:

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

Ou devrais-je viens de repenser à ma structure et d'utiliser les attributs rel et de la réutilisation des déclarations de classe?

Merci,

Tegan Snyder

InformationsquelleAutor Tegan Snyder | 2010-02-25
  1. 39
    $("#current_users").clone(false).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + "_cloned"); });

    Et de regarder vos événements s'y sont connectés. Vous aurez à les corriger si elles s'appuient sur des id.

    • Merci c'est exactement ce que je cherchais. Il fonctionne très bien.
    • Vous pourriez en faire un poil plus SEC à l'aide de la fonction de forme de attr(): $(this).attr('id',function(i,id){ return id+"_cloned"; });
    • Merci . Votre code d'enregistrer mes centaines de ligne . 🙂
    • c'est étonnant, vous sauver ma journée
    InformationsquelleAutor David Morton
  2. 1

    Sauf si vous avez réellement besoin d'identifier de manière unique chacun de ces cloné DIV via le code, je voudrais remplacer votre ID avec des classes réutilisables. Sinon, David Morton réponse dirait qu'il pourrait faire l'affaire.

    • Yep je suis d'accord. Pour ce que je fais j'ai besoin de l'unicité 🙂 Merci pour votre suggestion.
    InformationsquelleAutor jrista
  3. 0

    David Morton avait le droit de réponse en 2010, mais je voulais juste le mettre à jour. jQuery retiré .andSelf() dans 3.0.0 (voir adeneo réponse). La dernière et la plus grande (à ce jour) est .addBack(). De sorte que la ligne serait:

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

    Si vous avez besoin pour obtenir à nouveau comme une chaîne de caractères, ce qui était le cas pour moi, ajouter .get(0).outerHTML; à la fin.

    InformationsquelleAutor bryc3m0nk3y