For loop only loops 1 - JavaScript

嗨，我想做一个循环，它会自动添加“点”取决于有多少图像，我使用myArrImg.length，但它只输出一个类与一个类点一次即使它应该做四次？谁能帮助我:)For loop only loops 1 - JavaScript

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();

来源

2016-12-01 Christian Lauridsen

你永远只能创建一个'li'并多次追加它到同一父母，从而使它看起来像只发生过一次。在循环中创建'li'。 –

@NiettheDarkAbsol你为什么不把它作为回答发布呢？只是为了得到喜欢？这是一个答案，你仍然可以得到他们 – Hydro

@FREEZE tbh我不确定。在过去几个月的某个地方，我完全停止回答大多数问题，只是将评论发布到这样简单的问题上。就像......对整个人来说没有特别帮助的问题，或者我太过分的判断？我不知道。在211k的声誉，为什么我需要更多？ XD –

您的问题与您的想法不符。循环运行正确的次数，但它没有达到你想要的。

问题是您只创建了一个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); 
}

来源

2016-12-01 13:33:07 lonesomeday

在这里，我创建了一个UL以来的jsfiddle不允许操作文档，但过程是相同的

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]; 
 
\t test.appendChild(li); 
 
    } 
 
} 
 
dotsAuto();

<ul id="test"> 
 

 
</ul>

基本上你创建每个循环使用一个li，然后将其附加到列表中

来源

2016-12-01 13:31:26

For loop only loops 1 - JavaScript

回答

相关问题