こんにちは、ライターのマサトです！
今回は、jQueryによるクラス操作全般（指定・追加・変更・削除など）について学習をしていきましょう。
この記事では、
・「クラス」とは？
・クラスを指定・取得しよう
・クラスを追加しよう
・クラスを削除しよう
という基本的な内容から、
・任意のクラスが存在するかを判定する
・複数のクラスを取得してみよう
などの応用的な使い方に関しても解説していきます。
この記事で、jQueryによるクラス操作をしっかり学習して自分のスキルアップを目指しましょう！
「クラス」とは？
それでは、まず最初に「クラス」について基本的な知識から勉強していきましょう！
「クラス」はHTMLで指定できる属性の1つで、任意のクラス名を付与することでCSSからスタイルを変更するような用途で一般的に利用されています。
次のサンプル例を見てください！
<div>
<p class="text-one">テキスト１テキスト１</p>
<p class="text-two">テキスト２テキスト２</p>
<p class="text-three">テキスト３テキスト３</p>
</div>
「p要素」の属性で「class=」に付与されている文字列が「クラス名」になっており、このクラス名を利用してCSSからスタイルを変更できます。
このようなクラス名はjQueryからも操作することが可能で、本記事ではそのさまざまな手法について詳しく解説していきますので参考にしてみてください！
クラスを指定・取得しよう
ここからは、jQueryを使って「クラス」を操作していきましょう！
まず最初に、クラスを操作するために必要な「クラスの指定・取得」について学ぶ必要があります。
ただ、jQueryには非常に柔軟で便利なセレクタ指定が出来る機能が用意されているので、これを活用することで簡単に実現できます。
次のサンプル例を見てください！
<body>
<p class="text-one">テキスト１テキスト１</p>
<script>
var result = $('.text-one');
console.log( result[0] );
</script>
</body>
実行結果
<p class="text-one">テキスト１テキスト１</p>
この例では、p要素に付与されているクラス名を使って「$(‘.text-one’)」というカタチでjQueryのセレクタを指定しているのが分かります。
同時に指定したHTML要素も返り値として取得可能で、返り値の0番目に「p要素」が格納されていることが実行結果からも分かりますね。
また、「クラスの指定」ができるようになったら、「css()」を使ってそのままスタイルを操作することもできます！
var result = $('.text-one').css( 'color', 'red' );
このように記述することで、p要素にインラインでCSSが適用されるわけです。
クラスを追加しよう
jQueryでは、「addClass()」メソッドを使うことでスタイルシートに記述されたクラス名をあとから追加することも可能です。
例えば、次のように文字の色を「赤」に設定するCSSがあったとします。
.text-red {
color: red;
}
ここで作成したCSS「.text-red」を、jQueryを使って任意のHTMLに追加してみましょう！
追加するには、先ほど紹介した「addClass()」に追加したいCSSを指定するだけなので意外と簡単に実現できます。
次のサンプル例を見てください！
<body>
<p class="text-one">テキスト１テキスト１</p>
<script>
var result = $('.text-one').addClass('text-red');
console.log( result[0] );
</script>
</body>
実行結果
<p class="text-one text-red">テキスト１テキスト１</p>
この例では、jQueryのセレクタにp要素のクラス「text-one」を指定して、続けて「addClass(‘text-red’)」を記述することで別のクラスを追加しています。
実行結果を見ると、しっかりと2つのクラス名が設定されているのが分かりますね。
クラスを削除しよう
さて、クラスの指定・追加を学習したところで、「クラスの削除」についても学んでおきましょう！
クラスを削除するには「removeClass()」を使うのですが、addClass()と同じように削除したいクラス名を指定するだけで実現するので簡単です。
次のサンプル例を見てください！
<body>
<p class="text-one text-red">テキスト１テキスト１</p>
<script>
var result = $('.text-one').removeClass('text-red');
console.log( result[0] );
</script>
</body>
実行結果
<p class="text-one">テキスト１テキスト１</p>
この例では、あらかじめ「text-one text-red」という2つのクラス名が付与されたp要素があり、jQueryでその要素を指定しているのが分かります。
そして、「removeClass(‘text-red’)」と記述することで、「text-red」のクラス名が消えているのが実行結果からも分かりますね。
任意のクラスが存在するかを判定する
さて、jQueryによる基本的なクラス操作を学習したところで、少し応用技としていくつか便利なプログラミング手法について見ていきましょう！
まずは、「hasClass()」を使って任意のクラス名を持つHTML要素があるかどうかを確認する方法を勉強しましょう。
使い方は簡単で、確認したいクラス名をhasClass()の引数に指定するだけで利用可能です。
<body>
<p class="text-one text-red">テキスト１テキスト１</p>
<script>
var check = $('p').hasClass('text-red');
console.log( check );
</script>
</body>
実行結果
true
この例では、p要素に「text-one text-red」という2つのクラス名が設定されているのが分かります。
そしてjQueryでp要素を指定し、「hasClass(‘text-red’)」と記述することでp要素のクラス名に「text-red」が存在するかどうかを確認することが出来るわけです。
返り値として「true / false」を取得することが可能で、実行結果を見るとp要素には存在するためtrueが出力されているのが分かりますね。
クラスを変更するには？
次に、途中でクラス名を変更したい時はどのようにすれば良いでしょうか？
この場合には、jQueryを駆使して自分でプログラミングを行う必要がでてきます。
しかしながら、これまで学んだ内容を応用すれば次のようなプログラムを作成できるでしょう。
<body>
<p class="text-one text-red">テキスト１テキスト１</p>
<script>
var check = $('p').hasClass('text-red');
if( check ) {
$('p').removeClass('text-red').addClass('text-blue');
console.log( $('p')[0] );
}
</script>
</body>
実行結果
<p class="text-one text-blue">テキスト１テキスト１</p>
この例では、p要素に付与されている「text-red」というクラス名を「text-blue」というクラス名に変更しようとしています。
変更する手順としては、まず先ほど行ったように「text-red」というクラス名が存在するかどうかを確認し、存在していれば変更処理を行います。
これまで学習してきた「removeClass()」で該当クラスを削除し、続けて「addClass()」で変更したいクラス名を与えて上げれば良いですね。
このように、削除と追加の処理を連続して実行することで任意のクラス名に変更することが出来るわけです。
ちなみに、同じクラス名の追加と削除を繰り返したい場合であれば、「toggleClass()」という便利なメソッドが用意されています。
$('p').click(function() {
$(this).toggleClass('text-red');
})
この例では、「text-red」というクラス名が存在していれば削除し、存在していなければ追加するという処理を行っています。
そのため、文字列をクリックするたびに「text-red」というクラスが付与されたり削除されたりを繰り返すわけです。
これを応用すれば、クリックやマウスオーバーでメニューを表示するようなアニメーションも簡単に作れるでしょう。
複数のクラスを取得してみよう
これまでは、1つのクラスに対してさまざまな操作を行ってきました。
そこで、今度は複数のクラスを同時に取得して操作するようにプログラミングをしてみましょう！
複数同時に取得するには、jQueryの特徴でもある「セレクタ指定」を応用すれば簡単です。
<body>
<p class="text-one">テキスト１テキスト１</p>
<p class="text-two">テキスト２テキスト２</p>
<p class="text-three">テキスト３テキスト３</p>
<script>
var result = $('.text-one, .text-two, .text-three').css('font-size', '45px');
console.log( result );
</script>
</body>
実行結果
[p.text-one, p.text-two, p.text-three......]
この例では、p要素が3つありそれぞれ「text-one text-two text-three」というクラス名を持っています。
この3つのクラス名を、上記コード例みたいにそのままjQueryのセレクタ指定にするだけで同時に複数の処理を行うことが出来るわけです。
上記例では、3つのp要素を同時に取得し、「css()」を使って文字サイズを45pxに変更するという処理をおこなっています。
他の方法として「属性フィルタ」を使う方法が一般的で、例えばクラス名に任意の文字列が含まれているHTML要素をすべて抽出するような使い方ができます。
次のサンプル例を見てください！
var result = $('p[class*="text"]').css('font-size', '45px');
console.log( result );
実行結果
[p.text-one, p.text-two, p.text-three......]
この例では、属性フィルタを使い「p[class*="text"]」と記述することで、p要素のクラス名に「text」が含まれているHTML要素だけをすべて抽出することが可能です。
属性フィルタの応用範囲はとても広く、他にも「前方・後方一致」なども利用できるなど自由度の高いクラス操作を実現できます。
次の記事では、基本的な属性フィルタの使い方から活用技・正規表現まで幅広いサンプル事例と一緒に解説しているので、ぜひ参考にしてみてください！
まとめ
今回は、jQueryによる「クラス」操作の全般について学習をしました！
最後に、ポイントだけもう一度おさらいしておきましょう！
・jQueryのセレクタではクラス名をそのまま指定・取得できる
・「addClass()」でクラス名を追加することができる
・「removeClass()」でクラス名を削除することができる
・「hasClass()」で任意のクラス名が存在するかをチェックできる
・複数のクラス名を同時に取得するには属性フィルタを活用すると良い
上記内容を踏まえて、ぜひ自分のプログラムへ積極的に取り入れて活用できるように頑張りましょう！
