jQuery｢addClass｣で要素にクラスを追加する方法

2020年5月8日

jQueryのメソッド「.addClass()」は、クラスを追加する事ができるメソッド。

今回は、jQueryで「要素にクラスを追加する事ができる」メソッド「.addClass()」について、その使い方をサンプルを交えて解説しよう。

.addClass()の機能とは？

addClassの機能

.addClass()は、指定した要素に「任意のクラスを追加」するメソッド。

例えば$("p").addClass("test");とした場合、pタグにtestというクラスをつける事ができる。

jQuery反映前

<p>こんにちわ</p>

jQuery反映後

<p class="test">こんにちわ</p>

.addClass()の構文

指定要素に「任意のクラスを追加」する構文

$("セレクタ").addClass("クラス名");

指定要素に「複数のクラスを追加」する構文

$("セレクタ").addClass("クラス名 クラス名");

複数のクラスを追加する場合は.addClass("クラス名クラス名");のように「半角スペース」を空けて、複数のクラス名を指定すれば良い。

クラスの指定に「関数」を利用する場合

$("セレクタ").addClass(function(インデックス番号, 現在のクラス名){ 関数の内容 });

functionの１つめの引数に「インデックス番号（該当する要素の0からの順番）」、２つ目の引数に「現在付与されているクラス名」を指定して受け取る。

引数で受け取った値は関数内の{}の中で利用できる。

クラスを削除するメソッド

.addClass()とは逆に「クラスを削除」する場合は.removeClass()メソッドを使う事になる。

.removeClass()メソッドについてはこちらの記事を参考にしてみよう！

▶ jQuery｢removeClass｣で指定のクラスを削除する方法

jQueryで.addClass()を使って、複数のクラスを追加する例

jQuery

$(function(){
 $("p span").addClass("customer text-large");
});

HTML （jQuery反映前）

<p>おはようございます<span>山田</span>様</p>

HTML （jQuery反映後）

<p>おはようございます<span class="customer text-large">山田</span>様</p>

このように書く事で$("p span"")タグにcustomerクラスとtext-largeクラスを追加する事ができた。

クラスの指定に「関数を利用」する例

jQuery

$(function(){
 $("li").addClass(function(index, currentClass){
   if( currentClass == "on" ){
    return "anime";
   }else{
    return "off";
  });
 });
});

HTML （jQuery反映前）

<li class="on">メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>

HTML （jQuery反映後）

<li class="on anime">メニュー１</li>
<li class="off">メニュー２</li>
<li class="off">メニュー３</li>

この例では、if( currentClass == "on" )の時、つまり現在クラスonがついているliにはanimeクラスを追加し、それ以外のliにはoffクラスを追加するという例となる。

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント