重复包含已定义id属性的元素的HTML片段

Question

我需要在页面上多次重复一个html片段，但问题是所包含的html元素定义了id，在页面上应该是唯一的。那么，在不从元素中删除id属性的情况下，重复此代码段的正确方法是什么？

我可以将iframe用作此代码段的容器吗？让重复的ID存在于页面上吗？

Answer 1

您可以使用JavaScript来克隆代码段，同时更改ID。

示例，如果您的代码段是：

<div id="snippet">
   <table id="list">
    <tr id="0">
      <td id="firstName0">John</td>
      <td id="lastName0">Smith</td>
   </tr>
   <tr id="1">
      <td id="firstName2">John</td>
      <td id="lastName2">Doe</td>
   </tr>
  </table>
</div>

使用

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

将生产

<div id="snippet_1">
   <table id="list_1">
    <tr id="0_1">
      <td id="firstName0_1">John</td>
      <td id="lastName0_1">Smith</td>
   </tr>
   <tr id="1_1">
      <td id="firstName2_1">John</td>
      <td id="lastName2_1">Doe</td>
   </tr>
  </table>
</div>

这将解决重复的ID问题。