Sprawdź, czy element ma klasę CSS z jQuery

173

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.

javascript jquery css Mitchel Sellers
źródło
1
Jeśli chcesz to zrobić bez jQuery, „hasClass” z javascriptem?
Oriol

Odpowiedzi:

237

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')
bez powiek
źródło
4
Nie zgadzam się. Dokumentacja jest podzielona na kategorie, ale możesz łatwo zobaczyć wszystkie metody również w porządku alfabetycznym. Wszystko ma przykład, a sekcja komentarzy zwykle usuwa wszystko, co zostało pominięte. jQuery ma DUŻO doskonałych funkcji i narzędzi, a odkrycie ich wszystkich wymaga trochę nauki. -EDYCJA- To ma sens, zdecydowanie przeszło długą drogę.
Trafalmadorczyk
1
@Trafalmadorian, usunąłem mój oryginalny komentarz, ponieważ sytuacja się zmieniła. Pierwotnie opublikowałeś wszystko przed -EDIT-, a ja odpowiedziałem, że mój komentarz dotyczący jakości dokumentacji nie był już istotny, ale odnosił się do ich poprzedniego systemu (MediaWiki). Następnie usunąłeś swój poprzedni komentarz i ponownie wykonałeś polecenie -EDIT-. Mam nadzieję, że to uporządkowanie jest trochę jaśniejsze i mniej wprowadzające w błąd dla przyszłych czytelników.
powiek
@daniloquio, to znaczy, że jeśli przejdziesz bezpośrednio do api.jquery.com ... z jakiegoś powodu strona nadal zawiera linki do okropnej wersji wiki pod adresem docs.jquery.com
powiek
21

z FAQ

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

lub:

elem = $("#elemid");
if (elem.hasClass ("class")) {
   // whatever
}
Javier
źródło
3
Ostrożnie z .is () - „Metoda jest () w jQuery zwróci true, jeśli któryś z elementów w aktualnej kolekcji pasuje do żadnego z elementów kolekcji bazuje-the” - bennadel.com/blog/...
Zack
11

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 }
VinnyG
źródło
3

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!

Ismael Miguel
źródło
dlaczego to robisz ...&&!!((' '+e.classname+' ').indexOf(' '+c+' ')+1), a nie tylko &&!(' '+e.classname+' ').indexOf(' '+c+' ')?
Blexy
1
Ponieważ indexOfzwraca -1to klasa nie istnieje. Gdybym to zrobił !!-1, byłby true. Skoro to robię !!-1+1, będzie to fałszywe. Byłby lepszy sposób ...&&!!~(' '+e.className+' ').indexOf(' '+c+' '), ale wtedy o tym nie pamiętałem.
Ismael Miguel
Przepraszam, miałem na myśli...&&~(' '+e.className+' ').indexOf(' '+c+' ')
Ismael Miguel
3

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')
Derek Ekins
źródło
0 
 $('.segment-name').click(function () {
    if($(this).hasClass('segment-a')){
        //class exist
    }
});
winorośl
źródło
0

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();
    }
Eduardo Paz
źródło