【jQuery入門】hasClass()でクラスの存在有無を調べる方法!マサト2018/5/272018/5/27こんにちは、ライターのマサトです!今回は、jQueryから指定したクラスがHTML要素に存在するかどうかをチェックできる「hasClass()」について学習しましょう。・複数クラスの扱い方などの応用的な使い方に関しても解説していきます。まとめ「hasClass()」とは?それでは、まず最初に「hasClass()」について基本的な知識から身に付けていきましょう!「hasClass()」は、任意のクラス名を指定することで対象のHTML要素にそのクラスがあるかを確認できます。次のようなリスト要素があるとします。class="green">リスト3</li></ul>この場合、「li要素」には異なる3種類のクラスが付与されていますよね。このように同じ要素に複数のクラスが付与されている場合に、特定のクラスが存在しているかを確認するケースは少なくありません。このような時に「hasClass()」を使うと簡単に検出することが可能です。「hasClass()」の使い方この章では、hasClass()の基本的な使い方について学んでいきましょう!一般的な構文や実際の使い方について見ていきます。基本的な構文と書き方についてまずは、基本的な構文について学習しましょう!考え方としては、対象となる要素にhasClass()を実行する流れになります。次の例を見てください。);このように対象となるHTML要素にhasClass()を繋げて実行します。引数には、検出したいクラス名を文字列で指定すればOKです!また、戻り値を取得したり複数クラスを指定することも可能ですが、これについては後述します。次に、実際のプログラムを見ていきましょう!次のようなHTMLがあるとします。class="sample">サンプルテキスト</p>これは単純なp要素にクラス名が付与されているHTMLになります。そこで、この要素に対して「sample」というクラスが付与されているかを確かめてみましょう!次のサンプル例を見てください!$('p').hasClass('sample');この例では、p要素に対してhasClass()を実行しているのが分かりますね。引数に「sample」という文字列を指定することで、p要素に同じ名称のクラスが付与されいているかをチェックできるわけです。「hasClass()」の戻り値この章では、hasClass()が返す「戻り値」について見ていきましょう!戻り値を取得する方法やそれを利用した条件分岐の手法について学びます。false」を返す特性を持っています。指定のクラスを検出した場合は「true」を返し、検出できなかった場合は「false」を返します。先ほどのHTMLを思い出してください。class="sample">サンプルテキスト</p>このp要素にはクラス名「sample」が付与されていますよね。);実行結果trueこの例では、hasClass()を変数「p」に代入しているのが分かりますね。このように記述することで、hasClass()の戻り値を取得して変数「p」に格納することができるのです。false」のどちらかになるので、これをそのままIF文の条件式として利用するわけです。検出されました!まず最初に、p要素のクラス名が「sample」かどうかをチェックしています。戻り値を変数「p」に格納してそのままIF文の条件式に指定していますね?実行結果を見ると分かりますが、戻り値は「true」なので「真」の処理が実行されているわけです。複数クラスの扱い方この章では、複数クラスを検出する場合について見ていきましょう!具体的には、hasClass()の引数にセットする文字列について学んでいきます。特定のクラスを検出する際に、複数のクラスを探したいケースがあります。hasClass()を利用すると、特定の条件下において複数クラスを検出することが可能です。次のようなHTMLがあるとします。green">リスト3</li></ul>リスト要素にはそれぞれ異なるクラスが付与されています。green');console.log(li);実行結果truehasClass()の引数部分に注目してください!クラス名をスペースを空けて複数記述しているのが分かりますね。このように、複数のクラスを引数に設定することが可能で、実行結果も「true」になっているのが分かります。最初に「特定の条件下」で...と書いたのには理由があります!それは、引数の文字列が完全に一致しないと検出されないという点です。red」だと検出されないというわけです。・複数のクラスも検出できるが完全一致しないと検出されない上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。