요소에 jQuery가 포함 된 CSS 클래스가 있는지 확인

jQuery로 작업 중이며 요소에 관련된 특정 CSS 클래스가 있는지 여부를 쉽게 확인할 수있는 방법을 찾고 있습니다.

요소의 id와 내가 찾고있는 CSS 클래스가 있습니다. if 문에서 요소에 대한 해당 클래스의 존재를 기반으로 비교를 수행 할 수 있어야합니다.

hasClass방법을 사용하십시오 :

jQueryCollection.hasClass(className);

또는

$(selector).hasClass(className);

인수는 (분명히) 확인중인 클래스를 나타내는 문자열이며 부울을 반환하므로 대부분의 jQuery 메소드와 같은 체인을 지원하지 않습니다.

참고 :className 공백이 포함 된 인수 를 전달하면 문자 그대로 컬렉션의 요소 className문자열 과 일치 합니다. 예를 들어 요소가 있다면

<span class="foo bar" />

다음이 반환됩니다 true:

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

이것들은 다음을 반환합니다 false:

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

로부터 자주 묻는 질문

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

또는:

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

부정에 관해서는 요소가 클래스가 아닌지 알고 싶다면 Mark가 말한 것처럼 간단하게 수행 할 수 있습니다.

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

jQuery없이 :

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

또는:

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

이것은 jQuery보다 훨씬 빠릅니다!

여기에 착륙했지만 실제로 jQuery 무료 방법을 찾고있는 사람을 돕기 위해 :

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

공식 jQuery FAQ 페이지를 확인하십시오.

요소에 perticular 클래스가 있는지 여부를 테스트하는 방법

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

내 경우에는 'is'jQuery 함수를 사용하고 다른 CSS 클래스가 추가 된 HTML 요소가 있었으며 중간에 특정 클래스를 찾고 있었기 때문에 "is"를 확인하는 좋은 대안을 사용했습니다. 이미 다른 CSS 클래스가있는 html 요소에 동적으로 추가 된 클래스는 또 다른 좋은 대안입니다.

간단한 예 :

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

고급 예 :

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