w3school jQuery hasClass()-檢查多個類




jquery if this has class (9)

附:

if(element.hasClass("class"))

我可以檢查一個類,但有沒有簡單的方法來檢查“元素”是否有許多類?

我在用:

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

這不是太糟糕,但我正在考慮類似的東西:

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

其中不幸的是不起作用。

有沒有這樣的事情?


怎麼樣:

element.is('.class1, .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);

這不是最快的,但它是明確的,我喜歡的解決方案。 板凳: http://jsperf.com/hasclasstest/10 : http://jsperf.com/hasclasstest/10


使用默認的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-/22 : http://jsperf.com/hasclass-vs-is-/22


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

這應該做到這一點,簡單和容易。


這為我工作

這為Hasclass

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

是因為

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

那這個呢,

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


element.is('.class1, .class2')可以工作, element.hasClass('class1') || element.hasClass('class2') 慢35% element.hasClass('class1') || element.hasClass('class2') element.hasClass('class1') || element.hasClass('class2')

如果你對我說的話jsperf.com ,你可以在jsperf.com上進行驗證。
希望這可以幫助別人。


關於什麼:

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




jquery-selectors