5

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!

4
  • 2
    document.querySelectorAll('div[class*=fruits]')? Commented Jun 14, 2022 at 13:20
  • @DavidThomas as I mentioned fruits is a variable that will change, so I can't use CSS selectors for example: variable fruits I want to also trigger fruits-#whateverWordMayFollow# variable vegetables I want to also trigger vegetables-#whateverWordMayFollow#
    – andreisd
    Commented Jun 14, 2022 at 13:28
  • I'd suggest giving more information about your use-case, problem and enough "minimal reproducible example" code to adequately demonstrate the problem you're facing, because different variables can certainly be incorporated into a document.querySelectorAll() call. Commented Jun 14, 2022 at 13:33
  • @DavidThomas you're right! that was my bad. I had an issue somewhere else which was confusing me, but I got it working using document.querySelectorAll('div[class*="' + variable + '"]'); Thanks man!
    – andreisd
    Commented Jun 14, 2022 at 13:55

2 Answers 2

4

The classList property is a DOMTokenList which is a string but has methods and properties simular to Array methods.

  • Iterate through the array of tags (all). We'll use .flatMap() because we are dealing with multiple tags that may or may not have multiple matches.
    all.flatMap((div, idx) => {//...
    
  • Next, we'll use the .value property of classList which returns a space delimited string of each of the tag's classes.
    let list = div.classList.value.split(' ');
    
  • Then we'll .filter() each class of each tag by comparing with .includes()
    list.filter(cls => cls.toLowerCase().includes('fruit'));
    
  • Finally, an array of arrays is returned. Each sub-array contains a tag's matching classes.
    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>
1
  • thanks for all the info man! much appreciated :)
    – andreisd
    Commented Jun 14, 2022 at 14:12
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.