web-dev-qa-db-fra.com

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

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

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

javascriptjquerycss
173
Mitchel Sellers

Utilisez la méthode hasClass:

jQueryCollection.hasClass(className);

ou

$(selector).hasClass(className);

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

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

<span class="foo bar" />

alors ceci retournera true:

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

et ceux-ci vont retourner false:

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

à partir du FAQ 

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

ou:

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

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

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

Dans l’intérêt d’aider tous ceux qui atterrissent ici mais qui recherchent un moyen de le faire sans jQuery:

element.classList.contains('your-class-name')
3
Derek Ekins

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

3
Ismael Miguel

Consultez la page officielle de jQuery FAQ:

Comment puis-je tester si un élément a une classe particulière ou non

0
Kedar.Aitawdekar

Dans mon cas, j’ai utilisé la fonction 'is' une fonction 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, j’ai donc utilisé le "is", 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();
    }
0
Eduardo Paz
 $('.segment-name').click(function () {
    if($(this).hasClass('segment-a')){
        //class exist
    }
});
0
vineet