jQueryでクラスを追加するaddClassメソッドは、スクロールした時やボタンをクリックした時など、要素に変化をつけたりする時によく使用します。
そんなaddClassメソッドの基本的な使い方や、使用例、コールバック関数についても詳しく解説していきます。
クラスを削除するremoveClassメソッドについては、jQueryのremoveClassメソッドでクラスを削除する方法とコールバック関数の使い方【jQuery】をご覧ください。
addClassメソッドとは
jQueryのaddClassメソッドは、指定した要素にクラスを追加できるメソッドです。
このaddClassメソッドを使用して、動的に要素を変化させたりする事も可能です。
addClassメソッドの基本的な使い方
最初に、addClassメソッドの基本的な使い方を解説していきます。
基本的な構文は以下となります。
$("指定の要素").addClass("追加したい任意のクラス名");基本的な記述はaddClass()となり、引数には追加したい任意のクラス名を記述します。
※クラス名には「.」(ドット)は必要ありません。
例として以下をご覧ください。
<p>クラスを追加する要素</p>$("p").addClass("color-red");上記のコードを実行すると以下のようにクラスが追加されます。
<p class="color-red">クラスを追加する要素</p>例として、指定した要素pに「color-red」というクラスを追加してみました。
このように、簡単にクラスの追加が可能です。
複数クラスを追加する場合
複数のクラスを追加する場合は、半角スペースを空けてクラス名を記述していきます。
$("p").addClass("color-red bg-white");上記のように半角スペースを空けて記述する事で、複数のクラスを追加する事が可能です。
元から「color-red」というクラスがあった場合は、重複して追加されるわけではなく、存在していないクラスのみを追加してくれるようになっています。
コールバック関数について
addClassメソッドの引数にはコールバック関数を使用する事ができます。
このコールバック関数の引数として2つの値を指定する事ができ、値の1つ目にはインデックス番号、2つ目には現在付与されているクラス名が格納されています。
コールバック関数の使用例として以下をご覧ください。
<ul>
<li class="on">リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>$("li").addClass(function(index, currentClass){
var className = "";
if(currentClass != "on"){
className = "off ";
}
className += "list"+(index + 1);
return className;
});上記のコードの実行結果は以下となります。
<ul>
<li class="on list1">リスト1</li>
<li class="off list2">リスト2</li>
<li class="off list3">リスト3</li>
</ul>上記の例では、クラス「on」がついていないliに対してクラス「off」を追加し、全てのliに「list + 順番」のクラスを付与しています。
このようにコールバック関数を使う事で、様々な状況に対応できるようになります。
さいごに
いかがでしたでしょうか。
addClassメソッドは動的なコンテンツでよく使用されます。コールバック関数を含めて使えるようになれば、応用が効きますので、ぜひ覚えて使えるようになりましょう。
