Question

我正在尝试从数组myArr中传递字符串元素，同时选择应该通过forEach循环进入的div，以便下面的四个div元素中的每个元素都具有来自数组的相应字符串元素。

我遇到了一些麻烦，因为我正在使用querySelectorAll方法选择div。帮助将不胜感激。下面的代码只是我正在处理的示例，因此不能过多地更改。

HTML

<div class="number">old number</div>
<div class="number">old number</div>
<div class="number">old number</div>
<div class="number">old number</div>

JS

var numberDivs = document.querySelectorAll(".number");
var myArr = ['number1','number2', 'number3', 'number4'];

    numberDivs.forEach(function(el) {   
        el.innerHTML = "new number";

      for (var i = 0; i < myArr.length; ++i) {
          el.innerHTML = myArr[i];
    }    
});

现在，它（el）仅通过数组的最后一个元素到达 all div，而不是对应的div。

Answer 1

我想这就是你想要的：

numberDivs.forEach(function(el, i) {
    el.innerHTML = myArr[i];
});

假定它们的长度相等，并且不会像您的代码当前所做的那样覆盖每个元素的HTML。

Answer 2

var numberDivs = document.querySelectorAll(".number");
var myArr = ['number1','number2', 'number3', 'number4'];
for (var i = 0; i < myArr.length; i++) {
      numberDivs[i].innerHTML = myArr[i];  
}

您遇到的问题是，有一个遍历所有元素的for循环，然后是遍历数组的另一个for循环。内部for循环（一个适合您的数组）将始终在最后一个元素结束，因此每个对象（divs）都在该数组的最后一个元素结束。

http://jsfiddle.net/a8zrkejo/

Answer 3

快速修复，如果您确定数组的总数与div的数量相同然后仅循环数组，并使用每个元素的索引访问div。

var numberDivs = document.querySelectorAll(".number");
var myArr = ['number1','number2', 'number3', 'number4'];
myArr.forEach(function(value, Index) {
    numberDivs[Index].innerHTML = value
});

将数组元素传递给foreach div

3 个答案: