Określ, czy element ma klasę CSS z jQuery

Question

Pracuję z jQuery i sprawdzam, czy istnieje łatwy sposób na określenie, czy element ma przypisaną konkretną klasę CSS.

Mam identyfikator elementu i klasę CSS, której szukam. Po prostu muszę umieć w instrukcji if dokonać porównania opartego na istnieniu tej klasy na elemencie.

Answer 1

Użyj metody hasClass:

jQueryCollection.hasClass(className); 

lub

$(selector).hasClass(className); 

Argumentem jest (oczywiście) ciąg reprezentujący klasę podczas sprawdzania i zwraca wartość logiczną (więc nie obsługuje łańcuchowanie jak większość metod jQuery).

Uwaga: Jeśli zdać className argumentu, który zawiera spacje, to zostanie dopasowane dosłownie przed className ciąg ELEMENTY Collection. Więc jeśli na przykład masz element,

<span class="foo bar" /> 

wówczas powróci true:

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

a te powrócą false:

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

Answer 2

z FAQ

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

czyli

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

Answer 3

Co do negacji, jeśli chcesz wiedzieć, czy element ma klasę nie można po prostu zrobić jak powiedział Mark.

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

Answer 4

Sprawdź oficjalna strona jQuery FAQ:

How do I test whether an element has perticular class or not

Answer 5

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 WAY szybciej niż jQuery!

Answer 6

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

Answer 7

W moim przypadku użyłem „jest” funkcją jQuery, miałem elementu HTML z różnych klas css dodanych, szukałem konkretnej klasy w środku nich, więc użyłem " jest "dobrą alternatywą do sprawdzenia klasy dynamicznie dodanej 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(); 
    } 

Answer 8

W trosce o pomoc kogoś, kto wyląduje tutaj, ale faktycznie patrząc na jQuery wolnej drodze w ten sposób:

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