【jQuery】クラス操作まとめ（追加、削除、トグル、置換など）

jQueryで指定した要素のclassを追加・削除・切り替え・置換・判定・取得（数・値）をする方法をサンプルとともに紹介します。jQueryの addClass やremoveClassやtoggleClassやhasClassで実現できます。 javascriptで操作する方法については、「【JavaScript】クラス操作まとめ（追加、削除、トグル、置換など）」をご覧ください。

jQueryでクラスを追加する

jQueryでクラスを追加する場合はaddClassメソッドを使います。以下のソースコードのようになります。

$elm.addClass("first-class second-class third-class");

jQueryでクラスを削除する

jQueryでクラスを削除する場合はremoveClassメソッドを使います。以下のソースコードのようになります。

$elm.removeClass("first-class second-class third-class");

jQueryでクラスを切り替える（トグルする）

jQueryでクラスを切り替える（あれば削除、なければ追加する）にはtoggleClassメソッドを使います。複数クラスも同時に切り替え可能です。

$elm.toggleClass("first-class second-class third-class");

jQueryでクラスを置き換える（置換する）

jQueryでクラスを置き換える場合はjavascriptのclassList.replace()にあたるものがないため、removeClassをした後にaddClassを指定してあげる必要があります。以下のソースコードのようになります。

if ($elm.hasClass("classA")) {
        $elm.removeClass("classA").addClass('classB');
}

jQueryでクラスが含まれているかを判定する

jQueryでクラスが含まれているかを判定するにはhasClassメソッドを使います。

$elm.hasClass("className");

jQueryでクラスの数を取得する

jQueryでクラスの数を取得するにはclass属性を取得した後、splitを使い文字列を半角スペースごとに分割して配列に格納して、配列のlengthプロパティを使うことで実現します。以下のコードになります。

$elm.attr('class').split(' ').length

以下のコードでも代用可能です。

$elm.get(0).classList.length

jQueryでクラス属性に指定されている文字列を取得する

jQueryでクラス属性に指定されている文字列を取得するにはattrメソッドでクラス属性に指定されている値を取得します。

$elm.attr('class')