Déterminer si un élément possède une classe CSS avec jQuery

Question

Je travaille avec jQuery et je cherche à savoir s'il existe un moyen simple de déterminer si un é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 instruction if, faire une comparaison basée sur l'existence de cette classe sur l'élément.

Answer 1

Utilisez le hasClass méthode :

jQueryCollection.hasClass(className);

ou

$(selector).hasClass(className);

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

Note : Si vous passez un className qui contient des espaces, il sera comparé littéralement aux éléments de la collection. className chaîne. Donc si, par exemple, vous avez un élément,

<span class="foo bar" />

alors cela renverra true :

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

et ceux-ci renverront false :

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

Answer 2

De la FAQ

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

o:

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

Answer 3

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 }

Answer 4

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 !

Answer 5

Consultez la page officielle de la FAQ jQuery :

Comment tester si un élément a une classe particulière ou non ?