I've got this code:
const all = document.querySelectorAll('div');
let variable = 'fruits';
all.forEach((item) => {
if(item.classList.contains(variable)) {
item.style.backgroundColor = 'red';
}
});<div class="fruits">
Fruits
</div>
<div class="fruits-green">
Green fruits
</div>and I was wondering if theres to use classList.contains with a string/word partially?
Obviously what I'm trying to achieve is to get fruits-green styled too, since it contains fruits-green
I know there are CSS selectors for that, but given that my fruits variable will change with other JS functions, I'd like this to be vanilla JS too.
Any advice is much appreciated. Thanks!
I was able to make it work using
let variable = 'fruits';
const all = document.querySelectorAll('div[class*="'+variable+'"]');
all.forEach((item) => {
item.style.backgroundColor = 'red';
});<div class="fruits">
Fruits
</div>
<div class="fruits-green">
Green fruits
</div>Thanks again @David
The classList property is a DOMTokenList which is a string but has methods and properties simular to Array methods.
all). We'll use .flatMap() because we are dealing with multiple tags that may or may not have multiple matches.
all.flatMap((div, idx) => {//...
.value property of classList which returns a space delimited string of each of the tag's classes.
let list = div.classList.value.split(' ');
.filter() each class of each tag by comparing with .includes()
list.filter(cls => cls.toLowerCase().includes('fruit'));
const all = Array.from(document.querySelectorAll('div'));
let output = all.flatMap((div, idx) => {
let list = div.classList.value.split(' ');
console.log(list)
let matches = list.filter(cls => cls.toLowerCase().includes('fruit'));
return [matches];
})
console.log(output);<div class="fruits fries">
Fruits fries
</div>
<div class="fruits-green fruity">
Green fruits fruit
</div>