Javascript - Adding class to element from array

Question

I would like to add classes to an element in order from an array. I have three different classes, and I am not sure how to loop back to the beginning of the array to start over when I get to the end of the array of classes. Here is what I have so far:

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?
}

so you want the first one to be gray, second red, third blue, fourth great, fifth red, etc? — Sam Creamer
– Sam Creamer, Commented Jun 4, 2014 at 17:20
x = ++x % backgrounds.length will reset it, though you need backgrounds[x] instead of backgrounds[i] — cookie monster
– cookie monster, Commented Jun 4, 2014 at 17:22
or just i%backgrounds.length and disregard x all together. i is also incrementing — Sam Creamer
– Sam Creamer, Commented Jun 4, 2014 at 17:31

Etheryte · Accepted Answer · 2014-06-04 17:41:16Z

4

Just use modulo.

If you want classes like blogspot red then go with:

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];
}

It gets a little more interesting if you want classes like blogspotred, though.
getElementsByClassName doesn't return an array, but instead a node list, which will change once you start changing the classes (keep in mind, blogspotred doesn't fall under blogspot anymore). In that case you can, for example, do the following:

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];
}

edited Jun 4, 2014 at 17:41

answered Jun 4, 2014 at 17:22

Etheryte

25.4k12 gold badges77 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

benomatis Over a year ago

i really like the OP's question, and i would love to see how it's answered, but your solution doesn't seem to work for me: jsfiddle.net/nSXQ8 - is it because it needs to be called ondomready?

Sam Creamer Over a year ago

that's because in your jsfiddle, you don't actually set the background colour anywhere, you just call a string with that colour

benomatis Over a year ago

that's not the way i'm checking it - i'm looking at dev tools and the class names are not added... i see why (someone else said somewhere here already): classname should read className... but when i do that, your solution concatenates with the existing one and skips every other element...

benomatis Over a year ago

it should be elements[i].className += ' ' + backgrounds[i%len];, then it works, see jsfiddle.net/nSXQ8/2

Etheryte Over a year ago

Edited answer to address the above concerns.

Sam Creamer · Accepted Answer · 2014-06-04 17:23:29Z

1

You need to use mod. instead of using backgrounds[i], use backgrounds[i%3] where 3 is the length of the array

EDIT: in case you aren't aware of what that does, it gives the remainder. so first 0%3 is 0, then 1%3 is 1, 2%3 is 2, 3%3 is 0, 4%3 is 1, so on and so forth

answered Jun 4, 2014 at 17:23

Sam Creamer

5,38113 gold badges39 silver badges49 bronze badges

Comments

Jason · Accepted Answer · 2014-06-04 17:40:50Z

0

What you're looking for is not a loop, but a modulus:

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];
}

Using i%3 gives you the remainder of your i iterator divided by 3. So, 0 -> 0, 1 -> 1, 2 -> 2, 3 -> 0, and so on.

Edit: Added correction from comments, and used superior choice to dynamically mod on the length of the array rather than static 3.

edited Jun 4, 2014 at 17:40

answered Jun 4, 2014 at 17:22

Jason

13.8k2 gold badges31 silver badges40 bronze badges

3 Comments

benomatis Over a year ago

think you're making the same mistake as Nit: classname should read className ;)... but even then, same issue as with Nit's answer: class concatenated with existing one and only added to every other... see jsfiddle.net/nSXQ8/1

Jason Over a year ago

I have a feeling we both just copied directly from the OP, it's been a while since I've worked directly with class manipulation in native javascript, much preferring jQuery's methods for this myself.

benomatis Over a year ago

well, for the sake of others seeing this and the correctness of an answer, you may want to edit it...

Collectives™ on Stack Overflow

Javascript - Adding class to element from array

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related