jQueryでクラスを追加・削除

よく忘れるのでメモ。

追加

$('<セレクタ>').addClass('<クラス名>');

または

$('<セレクタ>').toggleClass('<クラス名>', true);

または

$('<セレクタ>').addClass(
    function(index, currentClass){
        // index: セレクタにより抽出した要素の配列のインデックス
        // currentClass: セレクタにより抽出した要素の配列のうち、indexが指し示す要素に割り当てられているクラス名
        /* 処理を行う */
        return '<クラス名>';
    }
);

削除

$('<セレクタ>').removeClass('<クラス名>');

または

$('<セレクタ>').toggleClass('<クラス名>', false);

または

$('<セレクタ>').removeClass(
    function(index, currentClass){
        // index: セレクタにより抽出した要素の配列のインデックス
        // currentClass: セレクタにより抽出した要素の配列のうち、indexが指し示す要素に割り当てられているクラス名
        /* 処理を行う */
        return '<クラス名>';
    }
);

既に追加されていたら削除、されていなかったら追加

$('<セレクタ>').toggleClass('<クラス名>');

または

$('<セレクタ>').toggleClass(
    function(index, currentClass, switch){
        // index: セレクタにより抽出した要素の配列のインデックス
        // currentClass: セレクタにより抽出した要素の配列のうち、indexが指し示す要素に割り当てられているクラス名
        // switch: 追加する場合true、削除する場合falseが与えられる
        /* 処理を行う */
        return '<クラス名>';
    }
);

<クラス名>は空白区切りで複数のクラス名が指定出来ます。