Question

我有这个JS代码：

var nbr1 = document.getElementsByClassName("nbr1"),
    nbr2 = document.getElementsByClassName("nbr2"),
    nbr3 = document.getElementsByClassName("nbr3"),
    nbr4 = document.getElementsByClassName("nbr4"),
    nbr5 = document.getElementsByClassName("nbr5"),
    nbr6 = document.getElementsByClassName("nbr6"),
    nbr7 = document.getElementsByClassName("nbr7"),
    nbr8 = document.getElementsByClassName("nbr8"),
    nbr9 = document.getElementsByClassName("nbr9");

(function(){
   'use strict';
    var i;
    for(i = 0; i <= 9; i += 1) {
       nbr + i .innerHTML = i;
    }
})();

我想写一个类似的代码：

nbr1.innerHTML = 1;
nbr2.innerHTML = 2;
nbr3.innerHTML = 3;
nbr4.innerHTML = 4;
nbr5.innerHTML = 5;
nbr6.innerHTML = 6;
nbr7.innerHTML = 7;
nbr8.innerHTML = 8;
nbr9.innerHTML = 9;

所以我如何编写正确的代码，以便给出与上面代码相同的结果。

代码HTML：

<div class="frame">
  <div class="nbr nbr1"></div>
  <div class="nbr nbr2"></div>
  <div class="nbr nbr3"></div>
  <div class="nbr nbr4"></div>
  <div class="nbr nbr5"></div>
  <div class="nbr nbr6"></div>
  <div class="nbr nbr7"></div>
  <div class="nbr nbr8"></div>
  <div class="nbr nbr9"></div>
</div>

Answer 1

尝试这样的事情..

＆＃13;

var els = document.querySelectorAll('.nbr')


Array.prototype.slice.call(els).forEach(function(x, i){
  x.innerHTML = i+1
  })

＆＃13;

<div class="frame">
  <div class="nbr nbr1"></div>
  <div class="nbr nbr2"></div>
  <div class="nbr nbr3"></div>
  <div class="nbr nbr4"></div>
  <div class="nbr nbr5"></div>
  <div class="nbr nbr6"></div>
  <div class="nbr nbr7"></div>
  <div class="nbr nbr8"></div>
  <div class="nbr nbr9"></div>
</div>

＆＃13;

修改

我试着给出一个基本的解释用于选择元素的方法是querySelectorAll，
然后我使用Array.prototype.slice.call将节点列表转换为数组，最后你可以看到forEach数组方法（方法的所有文档都可以在mdn中找到，检查链接，它们非常有用）。

如何在循环中编写get语句？

1 个答案:

修改