jQuery hasClass () - ตรวจสอบมากกว่าหนึ่งคลาส

ด้วย:

if(element.hasClass("class"))

ฉันสามารถตรวจสอบชั้นหนึ่ง แต่มีวิธีที่ง่ายในการตรวจสอบว่า "องค์ประกอบ" มีหลายชั้นหรือไม่?

ฉันใช้:

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

ซึ่งไม่ได้เลวร้ายเกินไป แต่ฉันคิดว่าบางสิ่งเช่น:

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

ซึ่งน่าเสียดายที่มันไม่ทำงาน

มีอะไรแบบนั้นเหรอ?

เกี่ยวกับ:

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

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

ทำงานแต่มันเป็น35% ช้ากว่า

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

หากคุณสงสัยในสิ่งที่ฉันพูดคุณสามารถยืนยันบนjsperf.com jsperf.com

หวังว่าจะช่วยคนได้

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

สิ่งนี้ควรทำง่ายและสะดวก

ตัวกรอง ()เป็นตัวเลือกอื่น

ลดชุดขององค์ประกอบที่ตรงกันให้ตรงกับตัวเลือกหรือผ่านการทดสอบการทำงานของ

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

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

แล้วเรื่องนี้ล่ะ

if (element.hasClass("class1 class2")

นี่คือคำตอบที่ไม่เป็นไปตามไวยากรณ์ของ

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

มันไม่ใช่วิธีที่เร็วที่สุด แต่ก็ไม่ได้คลุมเครือและเป็นทางออกที่ฉันต้องการ bench: http://jsperf.com/hasclasstest/10

เกี่ยวกับสิ่งนี้

$.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

เกี่ยวกับ:

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

jQuery

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

วานิลลา JS

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

ใช้ฟังก์ชัน 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

ใช้งานได้สำหรับฉัน:

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

 //do something here

 }

คุณสามารถทำสิ่งนี้ได้:

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

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

สิ่งนี้ใช้ได้กับฉัน:

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