通过同一类的多个div循环JSON数据

Question

我正试图用JSON数据填充同一类的DIVS列。但是，我得到的只是带有最后一个JSON记录的一个DIV。我需要所有的DIV都让JSON数据升序。第一DIV-第一个记录，第二DIV-第二个记录等等

这是我的HTML

<div class="main"></div>
<div class="main"></div>
<div class="main"></div>

这是我的JSON

var json = {"items": [
{
  "title": "sample 1",
  "author": "author 1"
},
{
  "title": "sample 2",
  "author": "author 2"
},
{
  "title": "sample 3",
  "author": "author 3"
}  
]};
var main-div = document.getElementsByClassName("main")[0];
var items = json.items;
for(var i = 0; i < items.length; i++) {    
    main-div.innerHTML = items[i].title;   
}

很明显，我在这里做错了什么。我在考虑循环浏览main-div.innerHTML = items[i].title;，但不知道怎么做。

Answer 1

假设第一个div填充良好，并且如果您有确切数量的div作为json项，您可以简单地执行以下操作：

var main_div = document.getElementsByClassName("main");
var items = json.items;
for(var i = 0; i < items.length; i++) {    
    main_div[i].innerHTML = items[i].title;   
}

下面是一个类似的例子：http://jsfiddle.net/5e4phkzg/

Answer 2

两个问题：

• maindiv不是有效的标识符，请将其更改为mainDiv
• var main-div = document.getElementsByClassName("main")[0];只得到第一个元素，去掉[0]，就可以在循环中使用`mainDiv[i]