jQuery hasClass（） - 检查多个类

Question

使用：

if(element.hasClass("class"))

我可以检查一个类，但有没有一种简单的方法可以检查“element”是否包含任何类？

我正在使用：

if(element.hasClass("class") || element.hasClass("class") ... )

这不是太糟糕，但我想的是：

if(element.hasClass("class", "class2")

遗憾的是，这不起作用。

有类似的东西吗？

Answer 1

element.is('.class1, .class2')

工作，但 比

慢<35％

element.hasClass('class1') || element.hasClass('class2')

如果您怀疑我说的话，您可以在jsperf.com验证。

希望这有助于某人。

Answer 2

怎么样：

element.is('.class1, .class2')

Answer 3

$.fn.extend({
    hasClasses: function (selectors) {
        var self = this;
        for (var i in selectors) {
            if ($(self).hasClass(selectors[i])) 
                return true;
        }
        return false;
    }
});

$('#element').hasClasses(['class1', 'class2', 'class3']);

这应该做到，简单易行。

Answer 4

filter()是另一种选择

  

将匹配元素集减少到与选择器匹配的元素集   通过功能测试。

$(selector).filter('.class1, .class2'); //Filter elements: class1 OR class2

$(selector).filter('.class1.class2'); // Filter elements: class1 AND class2

Answer 5

这个怎么样？

if (element.hasClass("class1 class2")

Answer 6

这是一个符合

语法的答案

$(element).hasAnyOfClasses("class1","class2","class3")

(function($){
    $.fn.hasAnyOfClasses = function(){
        for(var i= 0, il=arguments.length; i<il; i++){
            if($self.hasClass(arguments[i])) return true;
        }
        return false;
    }
})(jQuery);

它不是最快的，但它更明确，我更喜欢的解决方案。 替补：http://jsperf.com/hasclasstest/10

Answer 7

这个怎么样，

$.fn.extend({
     hasClasses: function( selector ) {
        var classNamesRegex = new RegExp("( " + selector.replace(/ +/g,"").replace(/,/g, " | ") + " )"),
            rclass = /[\n\t\r]/g,
            i = 0,
            l = this.length;
        for ( ; i < l; i++ ) {
            if ( this[i].nodeType === 1 && classNamesRegex.test((" " + this[i].className + " ").replace(rclass, " "))) {
                return true;
            }
        }
        return false;
    }
});

易于使用，

if ( $("selector").hasClasses("class1, class2, class3") ) {
  //Yes It does
}

而且似乎更快， http://jsperf.com/hasclasstest/7

Answer 8

怎么样：

if($('.class.class2.class3').length > 0){
    //...
}

Answer 9

jQuery

if( ['class', 'class2'].some(c => [...element[0].classList].includes(c)) )

香草JS

if( ['class', 'class2'].some(c => [...element.classList].includes(c)) )

Answer 10

这已经很旧了，但请听我说这个。

$.fn.extend({
  hasClasses: function (selectors) {
      // Setup
      const _id = $(this).attr('id'); // Preserve existing id
      const uuid = generateUUID();    // Create new id for query
      $(this).attr('id', uuid);       // Apply new id to element
     
      // Query to find if element has any of the classes
      const res = selectors.some(cls => !!$(`${uuid}.${cls}`).length);
      
      // Rollback on id 
      if (!_id) $(this).removeAttr("id"); // No Id to begin with
      else $(this).attr('id', _id);       // Preserve old id
      
      // Done
      return res;
    }
})

与其尝试在 selectors 中的类之一和元素的类之一之间找到匹配项，我们只需将临时 id (uuid) 应用于元素并查询以查找是否存在具有该临时 id 的某个元素以及 selectors 中列出的任何类。

这受到 Kalel Wade 和 Simon Arnold 的解决方案的启发，但对性能略有改进（以 jsbench.me 为基准）。

注意

JSBENCH 不允许保存超过一定数量的字符或单词。我在异步获取随机单词时遇到了一些麻烦，因此您可以手动获取随机单词并以这种方式使用工作台。

编辑：

我刚刚注意到，为了实现这一点，我依赖于 id 和异步调用。如果我需要在 hasClasses 更改 id 的同时按 id 查询元素，我可能会导致问题。

为了避免这种情况，我们可以添加一个唯一的 uuid 属性（字面意思就是 uuid）。

这里是更正：

$.fn.extend({
  hasClasses: function (selectors) {
    // Setup
    const uuid = generateUUID(); // Create new uuid to query later
    $(this).attr(uuid, "");      // Apply uuid to element for query

    // Query to find if element has any of the classes
    const res = selectors.some(cls => !!$(`[${uuid}].${cls}`).length);

    // Remove the uuid attribute
    $(this).removeAttr(uuid);

    // Done
    return res;
  }
})

我们仍然可以使用元素的 id，如果它有一个，而不是添加一个 attribute。
我不确定查询 id 是否更快。我引用了 this，但从它的外观来看，现代浏览器并没有受到太大影响。如果 id 存在而不是 attribute，仍然可以使用它实现。

Answer 11

使用默认的js match（）函数：

if( element.attr('class') !== undefined && element.attr('class').match(/class1|class2|class3|class4|class5/) ) {
  console.log("match");
}

在regexp中使用变量，请使用：

var reg = new RegExp(variable, 'g');
$(this).match(reg);

顺便说一句，这是最快的方式：http://jsperf.com/hasclass-vs-is-stackoverflow/22

Answer 12

为我工作：

 if ( $("element").hasClass( "class1") || $("element").hasClass("class2") ) {

 //do something here

 }

Answer 13

您可以这样：

if($(selector).filter('.class1, .class2').length){
    // Or logic
}

if($(selector).filter('.class1, .class2').length){
    // And logic
}

Answer 14

这对我有用：

$('.class1[class~="class2"]').append('something');