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
toz
will, at the end of the loop, change those back toa
.
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.