Javascript 如何通过aara循环并将每个值附加到具有特定类的div中

我有一个包含数据的数组，我想将其附加到一些具有相同类的div，但由于某种原因，我不知道我做错了什么：

代码如下：

var data = [ 
  { "country" : "Germany", "capital" : "Berlin"}, 
  { "country" : "Sweden", "capital" : "Stockholm"}, 
  { "country" : "Italy", "capital" : "Rome"}, 
  { "country" : "Japan", "capital" : "Tokyo"}, 
  { "country" : "USA", "capital" : "Washington DC"} 
];

let countries = data;

let capitalwrapper = document.querySelectorAll('.capital') 
for (var j = 0; j < countries.length; j++){
  capitalwrapper.forEach(function(elem) {
  let capital = countries[j].capital;
  let span = document.createElement('span');
  elem.innerHTML = capital;
})

}   

var数据=[
{“国家”：“德国”，“首都”：“柏林”}，
{“国家”：“瑞典”，“首都”：“斯德哥尔摩”}，
{“国家”：“意大利”，“首都”：“罗马”}，
{“国家”：“日本”，“首都”：“东京”}，
{“国家”：“美国”，“首都”：“华盛顿特区”}
];
让国家=数据；
让capitalwrapper=document.querySelectorAll（'.capital'）
对于（var j=0；j

在这一点上，华盛顿特区被显示在所有元素，但我不知道为什么

---

这里有一个

思考一下你的代码在做什么，你在所有国家/地区循环，对于这些国家/地区，你在所有div中循环，将当前div的

innerHTML

逐个设置到每个首都

相反，您应该只使用一个循环，即只在两个集合中循环一次：

var data=[{“国家”：“德国”、“首都”：“柏林”}、{“国家”：“瑞典”、“首都”：“斯德哥尔摩”}、{“国家”：“意大利”、“首都”：“罗马”}、{“国家”：“日本”、“首都”：“东京”}、{“国家”：“美国”、“首都”：“华盛顿特区”}）；
让国家=数据；
让capitalwrapper=document.querySelectorAll（'.capital'）
对于（var j=0；j

//其他内容

问题在于，您迭代所有大写名称，并在其中执行forEach，该函数将始终调用该函数，因此该函数最后一次调用时将使用最后一个大写字母，并且所有跨距都将相同

let countries = data;

let capitalwrapper = document.querySelectorAll('.capital') 
for (var j = 0; j < countries.length; j++){
    let elem = capitalwrapper[j];
    let capital = countries[j].capital;
    let span = document.createElement('span');
    elem.innerHTML = capital;   
}   

let countries=数据；
让capitalwrapper=document.querySelectorAll（'.capital'）
对于（var j=0；j

---

此代码修复了这一问题，但它依赖于数据中的

span.capital

与大写字母一样多。

您可以循环数据并选择具有相同索引的

.capital

元素

var data=[{“国家”：“德国”、“首都”：“柏林”}、{“国家”：“瑞典”、“首都”：“斯德哥尔摩”}、{“国家”：“意大利”、“首都”：“罗马”}、{“国家”：“日本”、“首都”：“东京”}、{“国家”：“美国”、“首都”：“华盛顿特区”}）；
让divs=document.querySelectorAll（'.capital'））
data.forEach（（{capital}，i）=>{
divs[i].innerHTML=capital
})

//其他内容

当然，很高兴我能帮上忙。即使我得到

无法读取未定义的属性“append”

@lucakiebelm，也要确保两个集合的大小相同。如果您的div少于countries，那么这里肯定会出现错误。