Sprawdź, czy element ma klasę CSS z jQuery

Pracuję z jQuery i szukam sposobu, aby sprawdzić, czy element ma skojarzoną z nim określoną klasę CSS.

Mam identyfikator elementu i klasę CSS, której szukam. Muszę tylko być w stanie, w instrukcji if, dokonać porównania na podstawie istnienia tej klasy w elemencie.

Użyj hasClassmetody:

jQueryCollection.hasClass(className);

lub

$(selector).hasClass(className);

Argument jest (oczywiście) łańcuchem reprezentującym klasę, którą sprawdzasz i zwraca wartość logiczną (więc nie obsługuje łączenia łańcuchowego, jak większość metod jQuery).

Uwaga: Jeśli przekażesz classNameargument zawierający spacje, zostanie on dopasowany dosłownie do ciągu elementów kolekcji className. Jeśli na przykład masz element,

<span class="foo bar" />

wtedy to zwróci true:

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

a te zwrócą false:

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

z FAQ

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

lub:

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

Jeśli chodzi o negację, jeśli chcesz wiedzieć, czy element nie ma klasy, możesz po prostu zrobić tak, jak powiedział Mark.

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

Bez jQuery:

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

Lub:

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

To DUŻO szybsze niż jQuery!

Aby pomóc każdemu, kto tu wyląduje, ale tak naprawdę szukał sposobu na zrobienie tego bez jQuery:

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

Sprawdź oficjalną stronę FAQ jQuery:

Jak sprawdzić, czy element ma klasę pertikularną, czy nie

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

W moim przypadku użyłem funkcji 'is' a jQuery, miałem element HTML z dodanymi różnymi klasami css, szukałem konkretnej klasy w środku tych, więc użyłem "jest" dobrą alternatywą do sprawdzenia klasa dynamicznie dodawana do elementu html, który ma już inne klasy css, jest to kolejna dobra alternatywa.

prosty przykład:

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

zaawansowany przykład:

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