Question

我需要根据我的集合中有多少个对象来创建多个div，如下所示

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

我想用jquery来实现这个目标。

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模板的简单示例：

var gridTemplate = '<div class="my-item">' +
                       '<div class="my-list-item-value">${ItemName}</div>' +
                       '<a href="#">$[DeleteLink]</a>' +
                   '</div>';
$.templates("gridTemplate", gridTemplate);

Underscore.js允许您在实际的.html文档中定义HTML，从而使您的JavaScript文件更加清晰。然后，只要您将令牌保留在HTML文件中，就可以随意更改HTML模板，而不会影响JavaScript。

这是一篇关于templating with Underscore.js的好文章。

使用jquery创建多个div

1 个答案: