【jQuery】指定した要素に class を追加・削除する方法

今日、後輩くんに質問されたので、自分の覚書としてもまとめ。
要素に指定したクラスを削除する方法です。
もちろん、削除だけでなく、追加もできます。

参考にしたサイトはこちら。

jQuery classの追加・削除 – Qiita
https://qiita.com/NobuyaIshikawa/items/300739f6da6a95e58306

使うメソッドは、addClass() と removeClass() です。

・addClass()

使い方は下記の通り。

<div id="content">クラスを追加する要素</div>

$("#content").addClass("add");

上記の jQuery を実行すると、id=”content” を指定したDIV要素に対して、class=”add” が追加されます。
 

・removeClass()

removeClass() の使い方は下記の通り。

<div id="content" class="remove">クラスを削除する要素</div>

$("#content").removeClass("remove");

こちらを実行すると、class=”remove” が DIV要素から削除されます。
 

・toggleClass()

こちらは今回調べて初めて知ったメソッドですが、要素に指定したクラスがあったらクラスを削除し、クラスがなかったらクラスを追加する、というものでした。
これなら、要素があるかどうかを調べる hasClass() を使って検索し、その結果で条件分岐…という処理を書かずにすみますね。
具体的には下記のとおりです。

if($("#content").hasClass("add")){  // add という class があるかを調べる
    $("#content").removeClass("add");  // あったら削除
} else {
    $("#content").addClass("add");  // なかったら追加
}

上記の処理が、下記の一行で済みます。

$("#content").toggleClass("add");

これは楽ですね！
見慣れないと、逆に何をしている処理なのかがわかりにくいので、コメントが必須かもしれませんが…コードの行数が少なくてすむ＆簡略できるのは嬉しいです。

ということで、jQuery で class の追加・削除を行う方法でした。