要素に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')

FAQから

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

または：

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

否定については、要素にクラスがないかどうかを知りたい場合は、マークが言ったように単純に行うことができます。

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ページを確認してください。

要素に特定のクラスがあるかどうかをテストする方法

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

私の場合、私は「is」jQuery関数を使用しました、異なるcssクラスが追加されたHTML要素があり、これらの真ん中に特定のクラスを探していたので、「is」を使用して確認しましたhtml要素に動的に追加されたクラス。すでに他のcssクラスがあり、これは別の優れた代替手段です。

簡単な例：

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