Déterminer si un élément a une classe CSS avec jQuery

Je travaille avec jQuery et je cherche à voir s'il existe un moyen simple de déterminer si l'élément a une classe CSS spécifique associée.

J'ai l'id de l'élément et la classe CSS que je recherche. J'ai juste besoin de pouvoir, dans une instruction if, faire une comparaison basée sur l'existence de cette classe sur l'élément.

Utilisez la hasClassméthode:

jQueryCollection.hasClass(className);

ou

$(selector).hasClass(className);

L'argument est (évidemment) une chaîne représentant la classe que vous vérifiez, et il renvoie un booléen (il ne prend donc pas en charge le chaînage comme la plupart des méthodes jQuery).

Remarque: Si vous passez un classNameargument contenant des espaces, il sera mis en correspondance littéralement avec la classNamechaîne des éléments de la collection . Donc si, par exemple, vous avez un élément,

<span class="foo bar" />

alors cela retournera true:

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

et ceux-ci reviendront false:

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

de la FAQ

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

ou:

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

Quant à la négation, si vous voulez savoir si un élément n'a pas de classe, vous pouvez simplement faire comme Mark l'a dit.

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

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

C'est BIEN plus rapide que jQuery!

Dans le but d'aider quiconque atterrit ici mais cherchait en fait un moyen gratuit de le faire avec jQuery:

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

Consultez la page officielle de la FAQ jQuery:

Comment tester si un élément a une classe spécifique ou non

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

Dans mon cas, j'ai utilisé la fonction 'est' une fonction jQuery, j'ai eu un élément HTML avec différentes classes css ajoutées, je cherchais une classe spécifique au milieu de celles-ci, j'ai donc utilisé le "est" une bonne alternative pour vérifier une classe ajoutée dynamiquement à un élément html, qui a déjà d'autres classes css, c'est une autre bonne alternative.

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

exemple avancé:

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