代码之家 › 专栏 › 技术社区 › ST80

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

arrays javascript

-1

ST80 · 技术社区 · 8 年前

我有一个包含数据的数组,我想将它附加到一些具有相同类的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

3 回复 | 直到 8 年前

Luca Kiebel 8 年前

想想你的代码在做什么,你在所有国家循环,对于这些国家,你在所有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>

Adder 8 年前

问题是你迭代了所有大写的名字,在里面做了一个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;   
}

这段代码修复了这个问题,但它依赖于 span.capital 作为数据中的大写字母。

Nenad Vracar 8 年前

你可以循环你的数据然后选择 .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>