jQuery hasClass() - 检查多个类

Question

和：

if(element.hasClass("class"))

我可以检查一个类，但是有没有一种简单的方法来检查“元素”是否有多个类中的任何一个？

我在用：

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

关于什么：

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

Answer 8

jQuery

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

香草JS

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

Answer 9

那这个呢，

$.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 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 。 如果我需要通过查询ID的元素，同样的时间，我可能会导致问题hasClasses改变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 ，但从它的外观来看，现代浏览器并没有太大的影响。 如果它存在而不是attribute仍然可以使用id来实现。

Answer 11

使用默认的 js match() 函数：

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

要在正则表达式中使用变量，请使用以下命令：

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

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

Answer 12

你可以这样做：

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

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

Answer 13

这对我有用：

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

Answer 14

对我有用：

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

 //do something here

 }