Determinar se um elemento tem uma classe CSS com jQuery


173

Estou trabalhando com jQuery e procurando ver se existe uma maneira fácil de determinar se o elemento tem uma classe CSS específica associada a ele.

Eu tenho o ID do elemento e a classe CSS que estou procurando. Eu só preciso ser capaz de, em uma declaração if, fazer uma comparação com base na existência dessa classe no elemento.


1
Se você quiser fazer isso sem jQuery, "hasClass" com javascript?
Oriol

Respostas:


237

Use o hasClassmétodo:

jQueryCollection.hasClass(className);

ou

$(selector).hasClass(className);

O argumento é (obviamente) uma string que representa a classe que você está verificando e retorna um booleano (para que não suporte encadeamento como a maioria dos métodos jQuery).

Nota: Se você passar um classNameargumento que contenha espaço em branco, ele será comparado literalmente com a classNamestring dos elementos da coleção . Então, se, por exemplo, você tem um elemento,

<span class="foo bar" />

então isso retornará true:

$('span').hasClass('foo bar')

e estes retornarão false:

$('span').hasClass('bar foo')
$('span').hasClass('foo  bar')

4
Discordo. A documentação está organizada em categorias, mas você também pode ver todos os métodos em ordem alfabética. Tudo vem com um exemplo, e a seção de comentários geralmente limpa tudo o que é deixado de fora. O jQuery possui MUITAS excelentes funções e utilitários e é preciso algum aprendizado para descobrir todos eles. Isso faz sentido, definitivamente percorreu um longo caminho.
Trafalmadorian

1
@Trafalmadorian, removi meu comentário original porque a situação mudou. Originalmente, você postou tudo antes do -EDIT-, e eu respondi que meu comentário sobre a qualidade da documentação não era mais relevante, mas referia-se ao sistema anterior (MediaWiki). Você excluiu seu comentário anterior e reposicionou com o -EDIT-. Espero que essa limpeza seja um pouco mais clara e menos enganosa para futuros leitores.
Eyelidlessness

@daniloquio, é se você ir diretamente para api.jquery.com ... por alguma razão, o site ainda links para a versão wiki terrível em docs.jquery.com
eyelidlessness

21

do FAQ

elem = $("#elemid");
if (elem.is (".class")) {
   // whatever
}

ou:

elem = $("#elemid");
if (elem.hasClass ("class")) {
   // whatever
}

3
cuidado com .is () - "O método is () no jQuery retornará true se QUALQUER elemento da coleção atual corresponder a QUALQUER elemento da coleção baseada em base" - bennadel.com/blog/…
zack

11

Quanto à negação, se você quiser saber se um elemento não tem classe, pode simplesmente fazer o que Mark disse.

if (!currentPage.parent().hasClass('home')) { do what you want }

3

Sem jQuery:

var hasclass=!!(' '+elem.className+' ').indexOf(' check_class ')+1;

Ou:

function hasClass(e,c){
    return e&&(e instanceof HTMLElement)&&!!((' '+e.className+' ').indexOf(' '+c+' ')+1);
}
/*example of usage*/
var has_class_medium=hasClass(document.getElementsByTagName('input')[0],'medium');

Isso é muito mais rápido que o jQuery!


por que você faz ...&&!!((' '+e.classname+' ').indexOf(' '+c+' ')+1), e não apenas &&!(' '+e.classname+' ').indexOf(' '+c+' ')?
precisa saber é

1
Porque o indexOfretorno -1é que a classe não existe. Se eu fizer !!-1, seria true. Desde que eu estou fazendo !!-1+1, será falso. Uma maneira melhor seria ...&&!!~(' '+e.className+' ').indexOf(' '+c+' '), mas eu não me lembrava disso na época.
Ismael Miguel

Desculpe, eu quis dizer...&&~(' '+e.className+' ').indexOf(' '+c+' ')
Ismael Miguel

3

No interesse de ajudar quem chega aqui, mas estava realmente procurando uma maneira livre de jQuery de fazer isso:

element.classList.contains('your-class-name')


0
 $('.segment-name').click(function () {
    if($(this).hasClass('segment-a')){
        //class exist
    }
});

0

No meu caso, usei a função 'is' a jQuery, adicionei um elemento HTML com diferentes classes css, estava procurando uma classe específica no meio delas, então usei a opção "is" para verificar uma classe adicionada dinamicamente a um elemento html, que já possui outras classes css, é outra boa alternativa.

exemplo simples:

 <!--element html-->
 <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

 <!--jQuery "is"-->
 $('#menu').is('.cbp-spmenu-open');

exemplo avançado:

 <!--element html-->
    <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

   <!--jQuery "is"-->
    if($('#menu').is('.cbp-spmenu-bottom.cbp-spmenu-open')){
       $("#menu").show();
    }
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.