Determinar si un elemento tiene una clase de CSS con jQuery

Question

Estoy trabajando con jQuery y estoy buscando si hay una manera fácil de determinar si el elemento tiene una clase de CSS específica asociada.

Tengo la identificación del elemento y la clase CSS que estoy buscando. Solo necesito poder, en una declaración if, hacer una comparación basada en la existencia de esa clase en el elemento.

Answer 1

Utilice el método hasClass:

jQueryCollection.hasClass(className); 

o

$(selector).hasClass(className); 

El argumento es (obviamente) una cadena que representa la clase que usted está mirando, y devuelve un valor lógico (por lo que no hace soporte de encadenamiento como la mayoría de los métodos de jQuery).

Nota: Si pasa un argumento className que contiene espacios en blanco, que se hará coincidir literalmente contra className cadena de elementos de la colección. Así que si, por ejemplo, tiene un elemento,

<span class="foo bar" /> 

entonces esto volverá true:

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

y éstos volverán false:

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

Answer 2

del FAQ

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

o:

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

Answer 3

En cuanto a la negación, si desea saber si un elemento tiene una clase no puede simplemente hacer como Mark dijo.

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

Answer 4

Comprobar la página oficial de jQuery FAQ:

How do I test whether an element has perticular class or not

Answer 5

Sin jQuery:

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

O:

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'); 

Ésta es la manera más rápida que jQuery!

Answer 6

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

Answer 7

En mi caso, he utilizado el 'es' una función de jQuery, que tenía un elemento HTML con diferentes clases CSS agregó, que estaba buscando una clase específica en medio de ellos, por lo que utiliza el " es "una buena alternativa para verificar una clase agregada dinámicamente a un elemento html, que ya tiene otras clases de css, es otra buena alternativa".

ejemplo sencillo:

<!--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'); 

ejemplo avanzado:

<!--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(); 
    } 

Answer 8

En aras de ayudar a cualquier persona que aterriza aquí, pero en realidad estaba buscando una manera libre de jQuery de hacer esto:

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