html - 重复包含定义了 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问题。