jQuery で要素に複数のクラスが指定されているか調べる .hasClasses()

jQuery で、対象要素にクラスが指定されているかを調べるには、.hasClass() というメソッドを使います。

このメソッドは、引数に指定したクラス名が対象要素に指定されている場合は true を返し、指定されていない場合は false を返すメソッドです。

しかし、この .hasClass() は、渡された文字列を検索するだけなので、一つのクラス名についてしか調べることができません(場合によっては複数もできるけど)。そこで、複数のクラスがついているか調べることができる「 .hasClasses() 」というメソッドを書いてみました。すでに書いている人がいたらごめんなさい。

【2010-10-20 追記】
@rewish さん@5509 さんのご意見を取り入れて少し変えました。こういう反応って嬉しいな〜!
jQuery.fn.extend({
    hasClasses: function( selector ) {
        if (typeof selector == "string") {
            selector = /^\./.test(selector) 
                ? selector.replace(/^\./,"").split(".")
                : selector.replace(/^ | $/g,"").split(" "); 
        }
        for (var i = -1,j = 0, n = selector.length; ++i < n;) {
            if (this.hasClass(selector[i])) j++;
        }
        return n === j;
    }
});

jQuery を読み込んだ後で、.hasClasses() を利用したい場所より前に上記のコードにコピペしておけばOKです。

次のように、調べたいクラス名を半角スペース区切りかCSSのセレクタのようなドットでつなぐタイプ、もしくは直接配列を渡す感じで指定すればOKです。

$(セレクタ).hasClasses("foo bar");
$(セレクタ).hasClasses(".foo.bar");
$(セレクタ).hasClasses(["foo","bar"]);

すべてのクラス名が対象要素に指定されている場合は true を返し、それ以外は false を返します。以下のサンプルページでは、100回繰り返して取得する秒数をチェックしてみましたが、それほど負荷にはならないみたいですね(モダンブラウザの場合)。

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...