Skip to content
Advertisement

What is the quickest way to change the classes of multiple elements?

I want to change the classes of a group of elements into other classes. The current classes of the elements are all different and so are the classes I want to change their current classes in to.

Currently, the best idea I have is to check the current class of the element, and then change it according to its class, repeating this for the amount of elements I need to change. For example, if I wanted to change all elements with the class ‘a’ to the class ‘z’ and ‘b’ to ‘y’ etc., I would do this:

var classes = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i' , 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
var classes_product = ['z', 'y', 'x', 'w', 'v', 'u', 't', 's', 'r', 'q', 'p', 'o', 'n', 'm', 'l', 'k', 'j', 'i', 'h', 'g', 'f', 'e', 'd', 'c', 'b', 'a'];
for (let i = 0; i < classes.length; i++) {
    var x = document.getElementsByClassName(classes[i]);
    for (let j = 0; j < x.length; j++) {
        x[j].className = classes_product[i];
    }
}

I tried to resolve this problem myself but all I could find was the ability to change the class using “.className”. I would really appreciate another method that doesn’t require as much typing because I need to make quite a few changes for some of my functions to work.

Advertisement

Answer

Your current code is buggy.

  • getElementsByClassName returns a live collection. If you remove a class from an element while iterating over the collection, the collection’s elements will shift down; your current implementation will skip some elements.
  • Since some of the resulting classes are the same as the initial classes, changing, eg a to z will, at the end of the loop, change those back to a.

While you could construct a collection of all matching elements in advance, then iterate over them, helped by a mapping of classes to their results…

const classTransformations = {
    a: 'z',
    b: 'y',
    c: 'x',
    // ...
};

Object.entries(classTransformations)
    .map(([initial, final]) => ({ elements: document.querySelectorAll('.' + initial), final }))
    .forEach(({ elements, final }) => {
        for (const elm of elements) elm.classList = final;
    });

It’d probably be better to take a step back and think about what changing all of these classes is intended to do, and if there’s a DRY-er way to do so.

If, as your original code appears to show, you only need to toggle between two states, you could toggle a single class on a single parent element, and change your CSS rules appropriately, so that, eg .parent .a results in the rules for the initial a class, and .parent.toggled .a results in the rules for the toggled z class.

Advertisement