Question

我有一个数组，该数组的数据要附加到具有相同类的某些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;
})

}

这时，华盛顿特区已显示在所有元素中，但我不知道为什么。

这里是JSFIDDLE

Answer 1

考虑您的代码在做什么，您正在遍历所有国家，对于每个国家/地区，您正在遍历所有div，因此将当前div的innerHTML设置为每个大写字母。

相反，您应该只使用一个循环，该循环仅在两个集合之间循环一次：

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++){
  let capital = countries[j].capital;
  let span = document.createElement('span');
  span.innerHTML = capital;
  capitalwrapper[j].append(span); // only add the span to the current div
	
}

<div class="container">
  
  <div class="country">
   <span class="name"></span>
   <span class="capital"></span>
  </div>
  
  <div class="country">
   <span class="name"></span>
   <span class="capital"></span>
  </div>
  
  <div class="country">
   <span class="name"></span>
   <span class="capital"></span>
  </div>
  
  <div class="country">
   <span class="name"></span>
   <span class="capital"></span>
  </div>
  
  <div class="country">
   <span class="name"></span>
   <span class="capital"></span>
  </div>  
  
  //other content
</div>

Answer 2

问题在于您遍历所有大写字母的名称，并在其中执行forEach，该forEach始终会调用该函数，因此该函数将最后使用最后一个大写字母进行调用，并且所有跨度都相同。

True

此代码可解决此问题，但它依赖于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; }与数据中的大写字母一样多。

Answer 3

您可以循环数据并选择具有相同索引的.capital元素。

var data = [ { "country" : "Germany", "capital" : "Berlin"}, { "country" : "Sweden", "capital" : "Stockholm"}, { "country" : "Italy", "capital" : "Rome"}, { "country" : "Japan", "capital" : "Tokyo"}, { "country" : "USA", "capital" : "Washington DC"} ];

let divs = document.querySelectorAll('.capital') 

data.forEach(({capital}, i) => {
  divs[i].innerHTML = capital
})

<div class="container">
  <div class="country">
    <span class="name"></span>
    <span class="capital"></span>
  </div>

  <div class="country">
    <span class="name"></span>
    <span class="capital"></span>
  </div>

  <div class="country">
    <span class="name"></span>
    <span class="capital"></span>
  </div>

  <div class="country">
    <span class="name"></span>
    <span class="capital"></span>
  </div>

  <div class="country">
    <span class="name"></span>
    <span class="capital"></span>
  </div>

  //other content
</div>

如何遍历aara并将每个值附加到具有特定类的div

3 个答案: