如何检查元素 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 和字符串/单词？

显然我想要实现的目标也是获得水果绿色风格，因为它包含水果绿色

我知道有 CSS 选择器，但考虑到我的fruits 变量会随着其他 JS 函数的变化而变化，我也希望它是普通的 JS。

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

Answer 1

该classList属性是DOMTokenList一个字符串，但具有与数组方法类似的方法和属性。

• 迭代标签数组 ( all)。我们将使用它.flatMap()，因为我们正在处理可能有也可能没有多个匹配的多个标签。

  all.flatMap((div, idx) => {//...
  

• 接下来，我们将使用该.value属性classList返回每个标记类的空格分隔字符串。

  let list = div.classList.value.split(' ');
  

• 然后我们将.filter()通过比较每个标签的每个类别.includes()

  list.filter(cls => cls.toLowerCase().includes('fruit'));
  

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

  all.flatMap((div, idx) => {//...
  

  let list = div.classList.value.split(' ');