jQuery hasClass () - verifique se há mais de uma classe


162

Com:

if(element.hasClass("class"))

Posso verificar uma classe, mas existe uma maneira fácil de verificar se "elemento" tem alguma de muitas classes?

Estou usando:

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

O que não é tão ruim, mas estou pensando em algo como:

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

O que infelizmente não funciona.

Existe algo assim?

Respostas:


227

E se:

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

9
Não, porque isso procuraria elementos que tenham ambas as classes. Acho que Marcel está procurando elementos com uma ou mais de várias classes.
Giles Van Gruisen

Só agora notei que eu tenho 4 id = "Olá" elementos lá. Versão corrigida para alegrar os validadores: jsbin.com/uqoku/2/edit
Matchu

1
@Matchu eu estava tendo o mesmo problema com .hasClass()mas sua solução parece ter feito o truque, graças
Nasir

11
Isto não funcionou para mim, mas $('element').is('.class1.class2')fez
iamchriswick

6
@iamchriswick: Isso é um pouco diferente do que o OP estava pedindo. .class1.class2corresponderão a elementos que possuem ambas as classes, mas eles estavam procurando elementos que correspondam a ambas as classes.
Matchu 18/03/16

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

funciona, mas é 35% mais lento que

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

insira a descrição da imagem aqui

Se você duvida do que eu digo, você pode verificar em jsperf.com .

Espero que isso ajude alguém.


16
19% mais lento, grande coisa. Programadores são mais caros.
Nowaker

21
@DamianNowak se esses programadores não estiverem dispostos a escrever o que equivale a uma quantidade trivial de mais código, provavelmente não são muito caros.
Akkuma

2
... hum, mas acabei de executar isso no jsperf para Chrome 21.0.1180 e o método is () agora é cerca de 20% mais rápido. Mas o hasClass () parece mais legível.
Danyal Aytekin

3
@ psychobrm: Se você precisa verificar 10 aulas de uma só vez, o que você realmente precisa é simplificar os nomes das suas aulas. Não há razão para tal bobagem. :)
cHao

5
Pessoalmente, não vejo a necessidade de otimizar o desempenho. 12000 operações por segundo parecem rápidas o suficiente para mim. Eu diria que use o que parecer melhor para você. Otimize o desempenho quando necessário.
3Dom

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

Isso deve ser feito, simples e fácil.


2
Está faltando um var no for (i nos seletores), criando assim um global.
Gremwell

4
Um pouco de pouca importância, mas os seletores de parâmetros devem realmente ser nomeados classes ou classNames , já que é isso que você está passando, não seletores. Os seletores teriam um ponto na frente deles, como em $ ('# elemento'). HasClasses (['. Class1', '.class2', '.class3']);
Jbyrd

10

filter () é outra opção

Reduza o conjunto de elementos correspondentes para aqueles que correspondem ao seletor ou passam no teste da função.

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

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


4

aqui está uma resposta que segue a sintaxe de

$(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ão é o mais rápido, mas é inequívoco e a solução que eu prefiro. bench: http://jsperf.com/hasclasstest/10


Error: $self is not defined
bagofmilk

1
@bagofmilk Minha resposta foi editada por outras pessoas desde que a escrevi, há 6 anos. Desde que eu não usei jQuery em anos, eu não sei exatamente o que se pretendia com a edição, mas originalmente eu tive var $self = $(this);pouco antes de o loop for
Henrik Myntti

1

Que tal isso,

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

Fácil de usar,

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

E parece ser mais rápido, http://jsperf.com/hasclasstest/7


1

A respeito:

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

3
Você não precisa do > 0. Se o comprimento for diferente de zero, ele retornará verdadeiro.
Isaac Lubow

1

jQuery

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

JS de baunilha

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

0

use a função js match () padrão:

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

Para usar variáveis ​​no regexp, use o seguinte:

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

a propósito, esta é a maneira mais rápida: http://jsperf.com/hasclass-vs-is-stackoverflow/22


Como esta resposta melhor, embora eu suspeito que looping através das classes e usando uma corda indexOf teste pode ser ainda mais rápido ainda ...
terraling

0

Funciona para mim:

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

 //do something here

 }

0

Você pode fazer assim:

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

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

-1

Isso funcionou para mim:

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

3
Esta resposta não tem nada a ver com a pergunta.
Jezen Thomas

Esta é realmente uma ótima resposta. A sintaxe do seletor acima captura todos os elementos da classe1 e da classe2. Então você pode fazer o que quiser com ele, neste caso, anexar. Não verificamos o desempenho em comparação com outros métodos, mas a sintaxe é agradável e sucinta.
Tim Wright

2
@ TimWright Esta é uma resposta terrível. A maneira normal de selecionar um elemento com 2 classes é $('.class1.class2')sem a necessidade de usar um seletor de atributos para a segunda classe. Além disso, a pergunta é perguntar como selecionar um elemento por uma das classes, não todas.
Todos os trabalhadores têm Essencial
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.