【jQuery】hasClass()の使い方をわかりやすく解説

hasClass()は、classの有無を調べるメソッドです。 jQueryでアニメーションをつけるときによく使用しますが、使い方がわからない人も多いのではないでしょうか。

この記事ではhasClass()の使い方を解説します。基本的な記述方式や具体的な使用例を挙げていますので、ぜひ学習にお役立てください。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

目次

• hasClass()とは
• hasClass()の使い方
  • 基本的な構文
  • classの有無を調べる
  • 複数classの有無を調べる
• hasClass()の使用例
• addClass()に関連するメソッド
  • addClass()
  • removeClass()
  • toggleClass()
• まとめ

hasClass()とは

hasClass()の役割は対象となる要素に特定のクラスがあるか調べるものです。例えば、以下のようなHTMLの記述があるとします。

<div class="fruits">
    <p class="apple">りんご</p>
    <p class="grape">ぶどう</p>
    <p class="lemon">レモン</p>
</div>

<p>タグにはそれぞれ異なるclassが付与されています。この中から任意のクラスがあるか調べるのがhasClass()の機能です。特定のクラスの有無を調べる機能を利用すれば様々な動きをつけることができます。詳しくは「hasClass()の使い方」の項目で解説します。

hasClass()の使い方

基本的な構文

hasClass()を使用するときの構文は以下のとおりです。

$(function(){
  $(‘対象の要素’).hasClass(‘クラス名’);
});

記述の際、要素やclassはクォーテーションマークで囲む必要があります。クォーテーションマークはシングル('')、ダブル("")どちらでも問題ありません。

classの有無を調べる

classの有無を調べる例として、if文の条件分岐を使用して、classがあれば「true」、classがなければ「false」と表示させる処理を行います。

記述例は以下のとおりです。

if ($(対象の要素).hasClass("クラス名")) {
  //対象の要素にclassがある場合
} else {
  //対象の要素にclassがない場合
}

出力結果を確認してみましょう。要素をクリックすると、classの有無に応じてテキストが変わります。

See the Pen jQuery hasClass()2 by ZeroPlus (@zeroplus-programming) on CodePen.

複数classの有無を調べる

hasClass()は複数のclassの有無を確認することができます。複数のクラスの有無を調べる際のサンプルでどのような動きになるのか確認してみましょう。

See the Pen jQuery hasClass() 4 by ZeroPlus (@zeroplus-programming) on CodePen.

hasClass("apple peach")となっている部分に注目してください。複数のクラスの有無を調べるときはこのような記述になります。

複数のクラスの有無を調べる時の注意点

hasClass()で複数のクラスの有無を調べる時には、HTMLの記述と順番が一致しなければならないことに注意しましょう。

上記の例ではクラス名を半角スペースで区切っていてapple peachという順番で記述しています。hasClass()のかっこ内の記述でクラス名をカンマ（,）で区切ったりクラス名の順番を変えたりすると正しくclassの有無を判定することができません。

hasClass()の使用例

制作の現場では

• classがついていないときにaddClass()でclassを追加する
• classがついていないときにremoveClass()でclassを削除する

という実装をよく行います。

下のサンプルでは、クリック時にjs-redクラスがあれば文字色を赤に、js-redクラスがなければ文字色を黒に戻す動きをつけています。

See the Pen jQuery hasClass() 3 by ZeroPlus (@zeroplus-programming) on CodePen.

addClass()に関連するメソッド

addClass()に関連するメソッドには以下のものがあります。

• addClass()
• removeClass()
• toggleClass()

それぞれの違いは以下のとおりです。

$(function () {
  $('任意の要素').〇〇Class('追加するクラス名');
});

addClass()

addClass()はclassを追加するメソッドです。

文字色が変わる処理で確認してみましょう。

See the Pen addClass() 基本的な使い方 by ZeroPlus (@zeroplus-programming) on CodePen.

removeClass()

removeClass()はクラスを削除するメソッドです。

記述例と出力結果を見てみましょう。

See the Pen removeClass() by ZeroPlus (@zeroplus-programming) on CodePen.

color-redというクラスだけが削除され、文字色がついていない状態となっています。

toggleClass()

removeClass()はクラスを追加したり削除したりするメソッドです。

クリックするとclassのつけ外しを行う処理を例としてみてみましょう。

See the Pen toggleClass() by ZeroPlus (@zeroplus-programming) on CodePen.

まとめ

hasClass()は対象の要素に特定のクラスがあるか調べるメソッドです。if文の条件分岐でクリック時の動きを切り替える際によく使います。

hasClass()メソッドまとめ

• 対象の要素に特定のクラスがあるか調べるメソッド
• $("対象の要素").hasClass("クラス名")と記述して使用する
• 複数のクラスの有無も検出できるがHTMLと順番を一致させる必要がある
• addClass()やremoveClass()と組み合わせて、classの有無による条件分岐を実装するときに使用することが多い

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー