javascript - jQuery:使用 Object Literal 的信息克隆 HTML

Question

我有以下 HTML，我想在一个 div 容器 (.container) 中重复 5 次。

<div class="block">
   <div class="name">Name</div>
   <div class="content>Content</div>
</div>

我有以下对象文字:

var main_content = {
    "content_1": {
        "name": "Joe",
        "position": "Baker"
    },
    "content_2": {
        "name": "Jane",
        "position": "Waitress"
    }
     "content_3", etc
}

我想克隆顶部 HTML 并为每个 block ，将名称和内容更改为其各自的对象文字项。所以我希望 HTML 的输出如下所示。我该怎么做？

<div class="block">
   <div class="name">Joe</div>
   <div class="position>Baker</div>
</div>
<div class="block">
   <div class="name">Jane</div>
   <div class="position>Waitress</div>
</div>
...

Answer 1

使用 jQuery 应该相对容易。这对你有用吗？

for(var i in main_content)
{
    var name = main_content[i].name,
    position = main_content[i].position,

    template = $('<div class="block">\
                      <div class="name">'+name+'</div>\
                      <div class="position">'+position+'</div>\
                  </div>');

    template.appendTo($('.container'));
}

请在此处查看有效的 jsFiddle 演示 > http://jsfiddle.net/jLPkS/