1

div コンテナー (.container) 内で 5 回繰り返したい次の HTML があります。

<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 を複製し、ブロックごとに、名前とコンテンツをそれぞれのオブジェクト リテラル項目に変更します。したがって、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>
...
4

2 に答える 2

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/

于 2012-11-26T21:41:31.750 に答える
1

ループで DOM に追加しないでください。

var block, resultHtml = '';
for(block in main_content){
  resultHtml += '<div class="block"><div class="name">' + main_content[block].name + '</div><div class="position">' + main_content[block].position + '</div></div>'
}
$('your-selector').append(resultHtml);
于 2012-11-26T21:53:11.440 に答える