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

只需使用模数。

如果您想要像 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];
}