jQueryで特定のクラスが付いている場合のみ処理を実行する方法

jQueryで条件を指定する際に、特定のクラスが存在しているかどうかを判別する方法をご紹介いたします。

例えば、div要素をクリックした時に、.hogeというクラスが付いていたら処理を実行したい場合、以下のように記述します。


$('div').click(function(){
  if($(this).hasClass('hoge')){
    $(this).css('background','red');
  }
});

.hogeというクラスが付いていたら、背景を赤に変更します。

hasClassで複数のクラスを判別したい時は、hasClass(‘hoge foo’)というように記述します。ただ、文字列が完全に一致していないといけません。この場合、クラスが「foo hoge」だと検出されないので注意が必要です。

以下のように、hasClassではなくlengthを使っても判別可能です。


$('div').click(function(){
  if($('.hoge').length;){
    $(this).css('background','red');
  }
});

あとがき

クラス名で条件分岐するケースは結構あると思うので、覚えておくと便利です。

特定のクラスが付与されているかどうかを判別したい時は、ぜひ参考にしてください。