Question

我尝试使用JSON数据填充同一类的DIVS列。但相反，我得到的只是一个带有最后一个JSON记录的DIV。我需要所有这些DIV来提升JSON数据。第一个DIV - 第一个记录，第二个DIV - 第二个记录等等。

这是我的HTML

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

这是我用JSON的JS

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

两个问题：

main-div不是有效的标识符，请将其更改为mainDiv。
var main-div = document.getElementsByClassName("main")[0];只获取第一个元素，删除[0]并在循环中使用`mainDiv [i]

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

2 个答案: