在遍歷數組的同時包裝每三個元素

Question

我有一個二維數組（affiliates），其中每個數組項包含一個圖像URL和一個鏈接URL。 randArray只是一個生成的隨機數列表（非重複），它與affiliates的長度相匹配。

我已經到了可以成功爲隨機圖片/網址組合生成HTML字符串的地步。

（不是必要的，但我想提供一點背景上述可能的更多信息。）

我試圖做的是組每三個迭代在一起，並<p>標籤包裹。我試過在當前的內部做一個嵌套循環，但只能到達它在相同的行中包含三個<p>標記的行，而我需要它們是三個連續的行。我覺得這應該很容易，但我很難過。任何幫助將非常感激。

for(var y=0; y < randArray.length; y++) { 

    var image = affiliates[randArray[y]][0]; 
    var url = affiliates[randArray[y]][1]; 

    var fullString = '<a href="' + url + '"><img src="' + image + '"></a>'; 
    console.log(fullString); 

} 

Answer 1

內你的循環，y % 3 == 0將是真正的第一次迭代後它的每一個第三，讓你的輸出時<p>和y % 3 == 0你</p>當y % 3 == 2和你的循環，如果length % 3 != 0後。

但是嵌套的循環可能是更容易做到並保持：

var x, image, url; 
var fullString = ""; 
var y = 0; 
while (y < randArray.length) { 

    fullString += '<p>'; 
    for (x = 0; x < 3 && y < randArray.length; ++x, ++y) { 
     image = affiliates[randArray[y]][0]; 
     url = affiliates[randArray[y]][1]; 
     fullString += '<a href="' + url + '"><img src="' + image + '"></a>'; 
    } 
    fullString += '</p>'; 
} 

Answer 2

for(var y=0; y < randArray.length; y++) { 

var image = affiliates[randArray[y]][0]; 
var url = affiliates[randArray[y]][1]; 
var fullString = ''; 
if(y%3 == 2){ 
    fullString += '<p>'; 
} 
fullString = '<a href="' + url + '"><img src="' + image + '"></a>'; 
if(y%3 == 2){ 
    fullString += '</p>'; 
} 
console.log(fullString); 

}

Answer 3

我不知道如果我理解，但是......

var t = []; 
for(var i=0;i<affiliates.length;i++) t.push(i); 
while(t.length>2){ 
var str = ''; 
for(var i=0;i<3;i++){ 
    str += '<a href="'; 
    var r = Math.floor(Math.random()*t.length); 
    str += affiliates[t[r]][1] + '"><img src="'; 
    str += affiliates[t[r]][0] + '"></a>'; 
    t.splice(r,1); 
} 
str = '<p>'+str+'</p>'; 
console.log(str); 
} 

Answer 4

我會做這樣的事情，但它不是優化的代碼，對不起：/

var counter = 1; //external counter for module (%3) 
var open = false; 
var tagOpen = '<p>'; 
var tagClose = '</p>'; 
var fullstring = ''; 
var buffer = '' 

for(var y=0; y < randArray.length; y++) { 

    var image = affiliates[randArray[y]][0]; 
    var url = affiliates[randArray[y]][1];  

    //groups entries 
    buffer += '<a href="' + url + '"><img src="' + image + '"></a>'; 

    if(counter % 3 == 0){ 
     fullstring = tagOpen + buffer + tagClose; //concat strings 
     console.log(fullString); 
     open = false; //set open to false 
    } else { 
     open = true; 
    } 

    counter++; 
} 

//if at the end of the loop there's still an open tag, close it 
if(open){ 
    fullstring += tagClose; 
}