重複一個包含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重複問題。