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.
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.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.
var classes = ['a', 'b', 'c', 'd'];
var classes_product = ['d', 'c', 'b', 'a'];
classes.forEach(function (item) {
var x = document.getElementsByClassName(item);
for (let j = 0; j < x.length; j++) {
const element = x[j];
element.classList.add(classes_product[j]);
element.classList.remove(item);
}
});.a {
color: red;
}
.b {
color: blue;
}
.c {
color: green;
}
.d {
color: grey;
}<div>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</div>