Question

<div id="test" class="a1 a2 a5"></div>

var element = document.getElementById("test") 
if (hasAnyOfTheseClasses(element, ["a1", "a6"])) { 
   //...
}

寻找一个简单的轻量级函数来检查函数是否包含任何列出的类而没有jQuery或其他库。

这样的功能很容易实现，但应该有一个规范，最快，最简单的答案，人们可以复制粘贴。

这似乎是吸血鬼，，但我问这个，所以googlers不必自己写。

不重复 - 链接的问题检查一个类，此问题要求检查任何类。

A jQuery version exists here.

Answer 1

以下是使用Array.some和Element.classList.contains的功能实现。

function hasAnyClass(element, classes) {
  return classes.some(function(c) {
    return element.classList.contains(c);
  });
}

var div = document.getElementById("test");
console.log(hasAnyClass(div, ["hi", "xyz"]));
console.log(hasAnyClass(div, ["xyz", "there"]));
console.log(hasAnyClass(div, ["xyz", "xyz"]));

<div id="test" class="hi there"></div>

请注意，旧版本的IE不支持这些功能，并且需要填充/填充。

Answer 2

这是我的实施：

function hasAnyOfTheseClasses(element, classes) {
    for (var i = 0; i < classes.length; i++) {
        if ((' ' + element.className + ' ').indexOf(' ' + classes[i] + ' ') > -1) {
            return true;
        }
    }
    return false;
}

它不优雅或快速。虽然工作。随意编辑以改进。

Answer 3

您可以使用正则表达式，不确定它纯粹更好但至少更灵活，因为您当前的测试过多地依赖于正确输入的空格。

function hasAnyOfTheseClasses(element, classes) {
    var className = element.className;
    for (var i = 0; i < classes.length; i++) {
        var exp = new RegExp('\b'+classes[i] + '\b');
      if(exp.test(className)) return true;
    }
    return false;
}

Answer 4

只需创建一个循环，检查数组中的每个值是否都是传递元素中的类

function hasAnyOfTheseClasses(elem, tofind) {
    classes = elem.className.split(' ');
    for(var x in tofind) {
        var className = tofind[x];
        if (classes.indexOf(className) == -1){
            return false;
        }
    }
    return true;
}

Answer 5

使用.classList属性获取元素的类列表。然后，您可以使用.contains()方法测试每个类。

function hasAnyOfTheseClass(element, classes) {
    var classList = element.classList;
    return classes.some(function(class) {
        return classList.contains(class);
    });
}

Answer 6

如何使用Array.prototype.some()和Array.prototype.indexOf()：

function hasAnyClass(el, classes) {
  var elClasses = el.className.split(' ');
  return classes.some(c => elClasses.indexOf(c) >= 0)
}

用于检查元素是否具有本机JS

6 个答案: