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不属于{{1}不再）。在这种情况下，您可以执行以下操作：

blogspot

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 - ＆gt; 0,1 - ＆gt; 1,2 - ＆gt; 2,3-＆gt; 0，等等。

编辑：从评论中添加更正，并使用优先选择动态调整数组的长度，而不是静态3。

Javascript - 从数组中添加类到元素

3 个答案: