Question

嗨我正在尝试制作一个for循环，根据有多少图像自动添加“点”，我使用myArrImg.length，但它只输出一个带有一类点的li，即使它应该做它四次？任何人都可以帮助我:)。

var myArrImg = ['img/erftdgdf33.jpg','img/iajdi89.jpg','img/isdkfj01.jpg','img/wergf43.jpg'];

function dotsAuto(){
  var test = document.getElementById('test');
  var li = document.createElement('li');
  li.className = 'dots';

  for (i = 0; i < myArrImg.length; i++) {
    test.appendChild(li);
  }
}
dotsAuto();

Answer 1

你的问题不是你的想法。循环操作的次数正确，但它没有按照您的意图进行操作。

问题在于您只创建了一个li元素。然后，您重复插入相同的元素。所以浏览器认为你这样做：

创建li元素。给它一个className。现在，开始循环遍历myArrImg数组。第一次插入li元素。第二次，插入li元素。第三次，插入li元素。等等。

每次都需要创建新的li元素，因为任何元素只能在文档中存在一次。基本上，您继续从文档中删除元素并将其放回到相同位置要每次创建新元素，请在循环中创建li：

var li;

for (i = 0; i < myArrImg.length; i++) {
  li = document.createElement('li');
  li.className = 'dots';
  test.appendChild(li);
}

Answer 2

这里我创建了一个ul，因为JSFiddle不允许操作文档，但过程是相同的

＆＃13;

var myArrImg = ['img/erftdgdf33.jpg','img/iajdi89.jpg','img/isdkfj01.jpg','img/wergf43.jpg'];

function dotsAuto(){
  var test = document.getElementById('test');


  for (i = 0; i < myArrImg.length; i++) {
    var li = document.createElement('li');
      li.className = 'dots';
      li.innerHTML = myArrImg[i];
	  test.appendChild(li);
  }
}
dotsAuto();

＆＃13;

<ul id="test">

</ul>

＆＃13;

基本上，您为EACH循环周期创建ONE li，然后将其附加到列表

For循环只循环1次 - JavaScript

2 个答案: