Determine si un elemento tiene una clase CSS con jQuery

Estoy trabajando con jQuery y estoy buscando para ver si hay una manera fácil de determinar si el elemento tiene una clase 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.

Usa el hasClassmétodo:

jQueryCollection.hasClass(className);

o

$(selector).hasClass(className);

El argumento es (obviamente) una cadena que representa la clase que está verificando, y devuelve un valor booleano (por lo que no admite el encadenamiento como la mayoría de los métodos jQuery).

Nota: Si pasa un classNameargumento que contiene espacios en blanco, se comparará literalmente con la classNamecadena de elementos de la colección . Entonces, si, por ejemplo, tienes un elemento,

<span class="foo bar" />

entonces esto devolverá true:

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

y estos volverán false:

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

de las preguntas frecuentes

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

o:

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

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

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

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

¡Esto es MUCHO más rápido que jQuery!

En aras de ayudar a cualquiera que aterrice aquí pero en realidad estaba buscando una forma gratuita de jQuery de hacer esto:

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

Consulte la página oficial de preguntas frecuentes de jQuery:

¿Cómo pruebo si un elemento tiene clase perticular o no?

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

En mi caso, utilicé el 'es' una función jQuery, tenía un elemento HTML con diferentes clases de CSS añadidas, estaba buscando una clase específica en el medio de estas, así que utilicé el "es" una buena alternativa para verificar una clase agregada dinámicamente a un elemento html, que ya tiene otras clases css, es otra buena alternativa.

ejemplo simple:

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