【jQuery】hasClassで要素にclassが存在するか確認する

こんにちは、Ryohei（@ityryohei）です！

本記事では、jQueryのhasClassを使って要素に指定したclassが存在するか確認する方法をご紹介しています。

jQueryでclassの存在を判定して処理をしたいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

jQueryを読み込む

jQueryを使用するために、本体ファイルを読み込みます。ここでは公式サイトにて公開されているCDNを利用します。

CDNはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。

jQueryのライブラリは以下のタグで読み込むことができます。2021年11月19日時点の最新バージョンです。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

上記の読み込みが完了したら次項に進みます。

hasClassとは

jQueryのメソッドにhasClassというものがあります。hasClassは、ある要素に対して引数に指定したclassが存在するかを確認し、存在した場合はtrue(真)を、存在しない場合はfalse(偽)を返すメソッドです。

下記のように使用します。

$('selector').hasClass('className')

上記例では、セレクターに指定した要素がclassNameというclassを持っていればtrue(真)を、存在しなければfalse(偽)を返します。classを指定する際は、addClassやremoveClassと同様に「.」を記述する必要はありません。

もし複数のclassの存在を確認したい場合は、半角スペースを開け、class名を追記します。

$('selector').hasClass('class1 class2 class3 ...')

hasClassは真偽値を返すメソッドなので、classが存在する・しないといった判定が必要な条件分岐でよく使われます。

hasClassで条件分岐をする

hasClassはclassが存在するかを確認するメソッドです。存在すれば処理Aを実行し、存在しなければ処理Bを実行するという使い方ができます。

if( $('selector').hasClass('className') ) {
    $('selector').removeClass('className');
} else {
    $('selector').addClass('className');
}

簡単なサンプルですが、下記デモのような使い方をすることが可能です。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

上記のデモでは、ボタンをクリックしてclassの付け外しの処理を実行しています。onでクリックイベントを取得した後に処理を行っています。HTMLとjQueryは下記のものを使用しています。

HTML

<button>Click!</button>
<div></div>

jQuery

$('button').on('click', function(){
    if( $('div').hasClass('blue') ) {
        $('div').removeClass('blue');
    } else {
        $('div').addClass('blue');
    }
});

最後に

私がこの記事を公開した頃は、jQueryの1.12.4を使用していましたが、2021年11月現在は3.6.0までバージョンが上がりました。検索してくれた皆さんが求めているのは最新の情報だと思いますので、過去記事を見返してなるべく最新の情報を載せておくように努めないといけませんね。がんばろう…

以上、jQueryのhasClassで要素にclassが存在するか確認する方法のご紹介でした！