創建使用jQuery

Question

多個div我需要根據多少對象都是我收集

<div class="container"> 
    <a href="#">title test</a> 
    <div class="video"> 
    video test 
    </div> 
    </div> 

在我想使用jQuery來達致這創建多個div像下面。

for(i =0 ;i < list.size; i++){ 

$("#wrapper").append(createDiv(list[i])); 

} 

function createDiv(object){ 

return <div class="container"> 
    <a href="object.link">object.title</a> 
    <div class="video"> 
    object.video 
    </div> 
    </div>; 
} 

我覺得太硬編碼的這種方式，因爲我可能需要重建container類。例如，我可能想要放入另一個div標籤或更多鏈接。我想知道是否有另一種方法可以做到這一點，這將允許我的代碼具有靈活性。而不是createDiv返回一個大字符串，我應該使用查詢功能，如createElement？

感謝您的任何意見:)

Answer 1

來處理這類問題的最好方法是用一個模板庫。模板允許您將HTML標記定義爲包含令牌的字符串。

然後，您可以將該模板應用到項目列表，並且它將用每個項目的匹配屬性替換這些標記。這消除了循環遍歷列表的需要，從而清理了代碼。

有幾種流行的模板庫：

• Mustache
• jQuery Templates（這已被棄用，但仍然被很多人使用）
• Underscore.js

下面是一個簡單的例子如何在項目列表上使用jQuery模板：

Underscore.js允許您在實際的.html文檔中定義您的HTML，這可以讓您的JavaScript文件更加清潔。然後，只要將標記保存在HTML文件中，就可以隨意更改HTML模板而不會影響JavaScript。

這裏有一篇關於templating with Underscore.js的好文章。