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

回答

相關問題