jQuery hasClass () - kiểm tra nhiều hơn một lớp

Với:

if(element.hasClass("class"))

Tôi có thể kiểm tra một lớp, nhưng có cách nào dễ dàng để kiểm tra xem "phần tử" có bất kỳ lớp nào không?

Tôi đang dùng:

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

Điều đó không quá tệ, nhưng tôi đang nghĩ về một cái gì đó như:

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

Thật không may, không làm việc.

Có một cái gì đó như thế?

Làm thế nào về:

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

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

hoạt động, nhưng nó chậm hơn 35% so với

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

Nếu bạn nghi ngờ những gì tôi nói, bạn có thể xác minh trên jsperf.com .

Hy vọng điều này sẽ giúp ai đó.

$.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']);

Điều này nên làm điều đó, đơn giản và dễ dàng.

bộ lọc () là một tùy chọn khác

Giảm tập hợp các phần tử khớp với các phần tử khớp với bộ chọn hoặc vượt qua bài kiểm tra của hàm.

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

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

Còn cái này thì sao?

if (element.hasClass("class1 class2")

đây là một câu trả lời theo cú pháp của

$(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);

nó không phải là nhanh nhất, nhưng nó rõ ràng và là giải pháp tôi thích. băng ghế dự bị: http://jsperf.com/hasclasstest/10

Cái này thì sao,

$.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;
    }
});

Dễ sử dụng,

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

Và nó dường như nhanh hơn, http://jsperf.com/hasclasstest/7

Thế còn:

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

jQuery

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

Vanilla JS

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

sử dụng hàm js match () mặc định:

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

để sử dụng các biến trong regrec, hãy sử dụng:

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

Nhân tiện, đây là cách nhanh nhất: http://jsperf.com/hasgroup-vs-is-stackoverflow/22

Làm việc cho tôi:

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

 //do something here

 }

Bạn có thể làm theo cách này:

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

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

Điều này làm việc cho tôi:

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