如何检查元素classlist是否部分包含字符串或单词？

Question

我有这个代码：

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>

我想知道是否有classList.contains用字符串/单词部分使用？

显然，我要实现的目标也是要使水果绿色造型，因为它包含水果 green，

我知道有CSS选择器为此，但是鉴于我的水果变量会随其他JS而变化。功能，我也希望这也是香草JS。

任何建议都非常感谢。 谢谢！

Answer 1

我能够使用

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>

再次感谢@david

Answer 2

classList属性是domtokenlist，它是字符串，但具有模拟数组方法的方法和属性。

• 通过标签数组迭代（ash all）。我们将使用.flatmap（），因为我们正在处理可能具有或可能没有多个匹配的多个标签。

    all.flatmap（（（div，idx）=＆gt; {// ...
   

• 接下来，我们将使用.value classList的属性，该属性返回标签的每个类的空间划界字符串。

   让list = div.classlist.value.split（''）;
   

• 然后，我们将通过与.includes（）进行比较，我们将.filter（）每个标签的每个类

    list.filter（cls =＆gt; cls.tolowercase（）。include（'fruit'））;
   

• 最后，返回了一个数组。每个子阵列都包含标签的匹配类。

    const all = array.from（document.queryselectorall（'div''））;
  
  令输出= all.flatmap（（（div，idx）=＆gt; {
    令list = div.classlist.value.split（''）;
    console.log（列表）
    令匹配= list.filter（cls =＆gt; cls.tolowercase（）。包括（'fruit'））;
    返回[匹配];
  }））
  
  console.log（输出）;  

   ＆lt; div class =“ fruits frues fries”＆gt;
    水果薯条
  ＆lt;/div＆gt;
  
  ＆lt; div class =“水果 - 绿色果味”＆gt;
    绿色水果水果
  ＆lt;/div＆gt;