Into the Program

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

Image

jQueryのhasClassを使ってclassが存在するか確認する方法をご紹介したいと思います。

jQueryを読み込む

GoogleのCDNを利用してjQueryを読み込みます。

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

CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryのライブラリは以下の記述で読み込むことができます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

hasClass

jQueryの一つにhasClassというものがあります。

hasClassは、ある要素に対して引数に指定したclassが存在するかを確認し、存在した場合はtrue(真)を、存在しない場合はfalse(偽)を返します。

$(E).hasClass('C')

上記例だと、要素「E」にclass「C」が存在した場合はtrue(真)を、存在しなければfalse(偽)を返します。classを指定する際は、addClassやremoveClassと同様に「.」を記述する必要はありません。

もし、引数を複数指定したい場合は半角スペースを開け、続けてclass名を指定します。

$(E).hasClass('C D E F ...')

また、hasClassを使って条件分岐をすることもできます。

hasClassで条件分岐をする

hasClassはclassが存在するかを確認するので、存在すれば処理A、存在しなければ処理Bという使い方をすることができます。

if( $(E).hasClass('C') ) {
  $(E).removeClass('C');
} else {
  $(E).addClass('C');
}

もし実際に使用する場合は以下デモのように使うことができます。

Demo

デモではボタンをクリックしてclassの付け外しの処理を実行しています。スクリプトは以下です。onでクリックを取得した後に処理を行っています。

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

工夫すればもっと複雑な処理も可能なので、classの存在を確認した後に処理を行う際に使用してみてはいかがでしょうか!

SHARE