JavaScript - Assigning a class to an element based on an array

Question

JavaScript - Assigning a class to an element based on an array

I am facing a challenge where I need to assign classes from an array to an element in sequential order. The issue is that once I reach the end of the array, I do not know how to loop back to the beginning and start over. Here is my current code:

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

javascript arrays

Answer 1

Answer №1

One way to achieve this is by using modulo.

For example, if you want classes like blogspot red, you can use the following code:

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

If you prefer classes like blogspotred, it becomes a bit more complex.
Since getElementsByClassName returns a node list and not an array, we need to handle it differently to avoid changes affecting other elements with different classes. Here's an approach you could take:

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

One way to achieve this is by using modulo.

For example, if you want classes like blogspot red, you can use the following code:

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

If you prefer classes like blogspotred, it becomes a bit more complex.
Since getElementsByClassName returns a node list and not an array, we need to handle it differently to avoid changes affecting other elements with different classes. Here's an approach you could take:

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 3

Answer №2

To optimize your code, consider using modulo instead of directly accessing elements in an array. Instead of background[i], try backgrounds[i%3] where 3 represents the length of the array.

EDIT: In case you're unsure how modulo works, it returns the remainder after division. For example, 0%3 is 0, 1%3 is 1, 2%3 is 2, 3%3 is 0, and so on.

Answer 4

To optimize your code, consider using modulo instead of directly accessing elements in an array. Instead of background[i], try backgrounds[i%3] where 3 represents the length of the array.

EDIT: In case you're unsure how modulo works, it returns the remainder after division. For example, 0%3 is 0, 1%3 is 1, 2%3 is 2, 3%3 is 0, and so on.

Answer 5

Answer №3

If you're not looking for a loop, but rather for a modulus solution, consider this code snippet:

const colors = ['green', 'purple', 'orange'];
const items = document.getElementsByClassName('article');
for (index=0; i<items.length; index++) {
    // It is more efficient to store the length of the array beforehand
    items[index].className += ' ' + colors[index % colors.length];
}

By using index % colors.length, you will get the remainder when dividing the iterator by the array's length. For example, 0 -> 0, 1 -> 1, 2 -> 2, 3 -> 0, and so forth.

Correction based on feedback: This approach dynamically uses the array's length instead of hard-coding 3.

Answer 6

If you're not looking for a loop, but rather for a modulus solution, consider this code snippet:

const colors = ['green', 'purple', 'orange'];
const items = document.getElementsByClassName('article');
for (index=0; i<items.length; index++) {
    // It is more efficient to store the length of the array beforehand
    items[index].className += ' ' + colors[index % colors.length];
}

By using index % colors.length, you will get the remainder when dividing the iterator by the array's length. For example, 0 -> 0, 1 -> 1, 2 -> 2, 3 -> 0, and so forth.

Correction based on feedback: This approach dynamically uses the array's length instead of hard-coding 3.

JavaScript - Assigning a class to an element based on an array

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging JavaScript within a Polymer component

What is the best way to use ajax to send a specific input value to a database from a pool of multiple input values

After updating Angular Material, the alert dialogs are now transforming into a large dark region

The jQuery dropdown selection for only displaying the month and year is not functioning properly when using the select

Webpack does not support d3-tip in its current configuration

Employing ajax with dynamically created buttons in PHP

Loading an Angular app causes Chrome devtools to freeze

Unable to get Mongoose's Required field to work in conjunction with Enum validation

Clicking on the button has no effect whatsoever

Issues have been reported regarding the paramMap item consistently returning null when working with Angular 8 routing

Difficulty with Bootstrap 4 mobile navbar dropdown feature

The JSON response from Rails containing multiple lines is not being parsed accurately

Activate a dropdown menu following the selection of a date on a calendar input using vue.js

Is requesting transclusion in an Angular directive necessary?

Converting objects to arrays in AngularJS and Ionic: A simple guide

Tips for saving the web address and breaking down each word

Unraveling and interpreting all incoming requests to my Node.js application

prismjs plugin for highlighting code displays code in a horizontal format

A step-by-step guide on making a web API request to propublica.org using an Angular service