Bestimmen Sie, ob ein Element eine CSS-Klasse mit jQuery hat

173

Ich arbeite mit jQuery und suche, ob es eine einfache Möglichkeit gibt, festzustellen, ob dem Element eine bestimmte CSS-Klasse zugeordnet ist.

Ich habe die ID des Elements und die CSS-Klasse, nach der ich suche. Ich muss nur in der Lage sein, in einer if-Anweisung einen Vergleich basierend auf der Existenz dieser Klasse für das Element durchzuführen.

Mitchel Sellers
quelle
1
Wenn Sie es ohne jQuery tun möchten, "hasClass" mit Javascript?
Oriol

Antworten:

237

Verwenden Sie die hasClassMethode:

jQueryCollection.hasClass(className);

oder

$(selector).hasClass(className);

Das Argument ist (offensichtlich) eine Zeichenfolge, die die Klasse darstellt, die Sie überprüfen, und es gibt einen Booleschen Wert zurück (daher wird die Verkettung nicht wie bei den meisten jQuery-Methoden unterstützt).

Hinweis: Wenn Sie ein classNameArgument übergeben, das Leerzeichen enthält, wird es buchstäblich mit der classNameZeichenfolge der Elemente der Sammlung abgeglichen . Wenn Sie zum Beispiel ein Element haben,

<span class="foo bar" />

dann wird dies zurückkehren true:

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

und diese werden zurückkehren false:

$('span').hasClass('bar foo')
$('span').hasClass('foo  bar')
Augenlidlosigkeit
quelle
4
Ich bin nicht einverstanden. Die Dokumentation ist nach Kategorien geordnet, aber Sie können alle Methoden auch leicht alphabetisch anzeigen. Alles kommt mit einem Beispiel, und der Kommentarbereich klärt normalerweise alles auf, was ausgelassen wurde. jQuery verfügt über eine Vielzahl hervorragender Funktionen und Dienstprogramme, und es erfordert etwas Lernen, um sie alle zu entdecken. -EDIT- Das macht Sinn, es ist definitiv ein langer Weg.
Trafalmadorianer
1
@Trafalmadorian, ich habe meinen ursprünglichen Kommentar entfernt, weil sich die Situation geändert hat. Ursprünglich hatten Sie alles vor -EDIT- gepostet, und ich antwortete, dass mein Kommentar zur Dokumentationsqualität nicht mehr relevant sei, sondern sich auf das vorherige (MediaWiki) System beziehe. Sie haben dann Ihren vorherigen Kommentar gelöscht und mit der -EDIT- neu eingestellt. Ich hoffe, dass diese Bereinigung für zukünftige Leser etwas klarer und weniger irreführend ist.
Augenlidlosigkeit
@daniloquio, es ist, wenn Sie direkt zu api.jquery.com gehen ... aus irgendeinem Grund verlinkt die Website immer noch auf die schreckliche Wiki-Version unter docs.jquery.com
Augenlidlosigkeit
21

aus den FAQ

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

oder:

elem = $("#elemid");
if (elem.hasClass ("class")) {
   // whatever
}
Javier
quelle
3
vorsichtig mit .is () - "Die is () -Methode in jQuery gibt true zurück, wenn eines der Elemente in der aktuellen Sammlung mit einem der Elemente in der is-basierten Sammlung übereinstimmt
zack
11

Wenn Sie wissen möchten, ob ein Element keine Klasse hat, können Sie einfach das tun, was Mark gesagt hat.

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

Ohne jQuery:

var hasclass=!!(' '+elem.className+' ').indexOf(' check_class ')+1;

Oder:

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

Dies ist viel schneller als jQuery!

Ismael Miguel
quelle
Warum tust du das ...&&!!((' '+e.classname+' ').indexOf(' '+c+' ')+1)und nicht nur &&!(' '+e.classname+' ').indexOf(' '+c+' ')?
Blexy
1
Da indexOfRückgabe -1ist, existiert die Klasse nicht. Wenn ich das tue !!-1, wäre es true. Da ich es tue !!-1+1, wird es falsch sein. Ein besserer Weg wäre ...&&!!~(' '+e.className+' ').indexOf(' '+c+' '), aber ich erinnerte mich damals nicht daran.
Ismael Miguel
Entschuldigung, ich meinte...&&~(' '+e.className+' ').indexOf(' '+c+' ')
Ismael Miguel
3

Um allen zu helfen, die hier landen, aber tatsächlich nach einer jQuery-freien Möglichkeit suchen, dies zu tun:

element.classList.contains('your-class-name')
Derek Ekins
quelle
0
 $('.segment-name').click(function () {
    if($(this).hasClass('segment-a')){
        //class exist
    }
});
Weinstock
quelle
0

In meinem Fall habe ich die jQuery-Funktion 'is' verwendet. Ich habe ein HTML-Element mit verschiedenen CSS-Klassen hinzugefügt. Ich habe nach einer bestimmten Klasse in der Mitte gesucht. Daher habe ich das "is" als gute Alternative zur Überprüfung verwendet Eine Klasse, die dynamisch zu einem HTML-Element hinzugefügt wird, das bereits andere CSS-Klassen enthält. Dies ist eine weitere gute Alternative.

einfaches Beispiel:

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

erweitertes Beispiel:

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