Déterminez 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 qui lui est associée.

J'ai l'identité de l'élément et la classe CSS que je recherche. Je dois simplement, dans une déclaration if, faire une comparaison en fonction de l'existence de cette classe sur l'élément.

Utilisez la méthode hasClass :

 jQueryCollection.hasClass(className);

 $(selector).hasClass(className);

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

Remarque: Si vous passez un argument className qui contient des espaces, il sera adapté littéralement à la chaîne className des éléments de la className . Donc, si, par exemple, vous avez un élément,

 <span class="foo bar" />

Alors cela retournera true :

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

Et ceux-ci renverront 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 }

En ce qui concerne la négation, si vous voulez savoir si un élément n'a pas une classe, vous pouvez simplement faire comme l'a dit Mark.

 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 WAY plus rapide que jQuery!

Consultez la page officielle jQuery FAQ:

Comment vérifier si un élément a une classe periculaire ou non

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

Dans mon cas, j'ai utilisé la fonction 'is' jQuery, j'avais un élément HTML avec différentes classes css ajoutées, je cherchais une classe spécifique au milieu de celles-ci, alors j'ai utilisé la "c'est" une bonne alternative à 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(); }

Dans l'intérêt d'aider quelqu'un qui atterrit ici, mais cherchait réellement une manière gratuite de jQuery de faire ceci:

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