Javascript - 從數組中添加類到元素

Question

我想從數組中按順序向元素添加類。 我有三個不同的類，我不知道如何循環回到數組的開頭，當我到達類數組的末尾時重新開始。 這是我到目前為止：

var backgrounds = ["gray", "red", "blue"];
var elements = document.getElementsByClassName("blogpost");
var x = 0;
for (i = 0; i < elements.length; i++) {
    elements[i].classname += backgrounds[i];  //This is where I do not know how to add the elements in order
    x++; //This will get to the end of the array, how do I loop back to the beginning of the array after hitting the last element?
}

Answer 1

只需使用modulo。

如果你想要像blogspot red這樣的課程，請選擇：

var backgrounds = ["gray", "red", "blue"];
var elements = document.getElementsByClassName("blogpost");
var len = backgrounds.length;
for (i = 0; i < elements.length; i++) {
    elements[i].className += ' ' + backgrounds[i%len];
}

如果你想要像blogspotred這樣的課程，它會變得更有趣。
getElementsByClassName不返回數組，而是返回一個節點列表，一旦開始更改類，它就會改變（請記住， blogspotred不再屬於blogspot ）。 在這種情況下，您可以執行以下操作：

var backgrounds = ["gray", "red", "blue"];
var elements = Array.prototype.slice.call(document.getElementsByClassName("blogpost"));
var len = backgrounds.length;
for (i = 0; i < elements.length; i++) {
    elements[i].className += backgrounds[i%len];
}

Answer 2

你需要使用mod。 而不是使用backgrounds[i] ，使用backgrounds[i%3] ，其中3是數組的長度

編輯：如果你不知道它做了什么，它會給出余數。 所以先0％3為0，然后1％3為1,2％3為2,3％3為0,4％3為1，依此類推

Answer 3

你要找的不是循環，而是模數：

var backgrounds = ['gray', 'red', 'blue'];
var elements = document.getElementsByClassName('blogpost');
for (i=0; i<elements.length; i++) {
    // the following could be slightly optimized by storing the value to
    // backgrounds.length before the loop starts
    elements[i].className += ' ' + backgrounds[i%backgrounds.length];
}

使用i%3給你你的其余部分i迭代除以3，所以，0 - > 0，1 - > 1，2 - > 2，3 - > 0，等等。

編輯：從注釋添加更正，並使用優越的選擇動態模擬數組的長度而不是靜態3 。