jQuery で、対象要素にクラスが指定されているかを調べるには、.hasClass() というメソッドを使います。 このメソッドは、引数に指定したクラス名が対象要素に指定されている場合は true を返し、指定されていない場合は false を返すメソッドです。 しかし、この .hasClass() は、渡された文字列を検索するだけなので、一つのクラス名についてしか調べることができません(場合に...
jQuery で、対象要素にクラスが指定されているかを調べるには、.hasClass() というメソッドを使います。
このメソッドは、引数に指定したクラス名が対象要素に指定されている場合は true を返し、指定されていない場合は false を返すメソッドです。
しかし、この .hasClass() は、渡された文字列を検索するだけなので、一つのクラス名についてしか調べることができません(場合によっては複数もできるけど)。そこで、複数のクラスがついているか調べることができる「 .hasClasses() 」というメソッドを書いてみました。すでに書いている人がいたらごめんなさい。
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回繰り返して取得する秒数をチェックしてみましたが、それほど負荷にはならないみたいですね(モダンブラウザの場合)。
以上です。