同一div的多個迭代？

Question

因此，我在屏幕上有一個菜單，其中有幾個相同的框-唯一的區別是框的編號不同。

<div id="1">
    <select name="option1">
        <option value="1">foo</option>
        <option value="2">bar</option>
    </select>
</div>

<div id="2">
    <select name="option2">
        <option value="1">foo</option>
        <option value="2">bar</option>
    </select>
</div>

每個div是900〜行代碼，每當我更改時，我都必須更改每個div-正在編寫for循環並使用document.write最好的方法來完成一次div的編寫（並減小文件大小）？

var divCode

for (var i=1; i < 7; i++){
 divCode +='
   <div id="'+i+'">
   <select name="option'+i+'">
   <option value="1">foo</option>
   <option value="2">bar</option>
   </select>
   </div>'
}
document.write('divCode')

還是在javascript中有更好的方法？ 考慮到編寫900行串聯的字符串代碼並不是一件很有趣的事情（或效率很高），我想我想想是這樣的。

Answer 1

您可以使用JavaScript模板引擎（例如mustache）來保持代碼的簡單性和可維護性。

這是一個示例（除了胡子之外，還使用jQuery）：
HTML：

<script type="text/template" id="template_divs">
    {{#divs}}
    <div id="{{id}}">
        Hallo my name is {{name}}!
    </div>
    {{/divs}}
</script>

<div id="container">
</div>

JS：

var someDivs = {divs: [{id: 1, name: "Tom"},{id: 2, name: "Bob"},{id: 3, name: "Earl"}]};

var parsed = Mustache.render($('#template_divs').html(), someDivs);

$('#container').html(parsed);

我創建了一個小提琴來為您演示： http : //jsfiddle.net/2gYCz/

Answer 2

我必須同意，使用Javascript庫進行模板化是解決上述問題的理想選擇。 但是，我想提出一種使用html和Javascript而不提供庫的替代方法。 我要做的是用不可見的html創建模板，如下所示：

HTML

<div class="container">
    <div class="template"> <div class="someDiv" style="display:none;overflow: hidden;">Some Div</div> </div>
</div>

使用Javascript

 var item =document.querySelector(".someDiv" );
        var parent = document.querySelector(".template");
        for (var i=0;i<3;i++){
            item = item.cloneNode(true);
            item.setAttribute("id","newDemo"+i);
            item.setAttribute("style","");
            parent.appendChild( item );
        }

使用Javascript，我將克隆項目並使用動態值設置屬性。