[jQuery]指定した要素に複数のクラスが存在するか調べる

jQueryで要素にクラスが存在するかどうかを知りたい場合、hasClass()を使います。
hasClass()は、指定したクラスに合致する要素があればtrueを、無ければfalseを返します。
しかし、複数のクラスを調べる場合には、注意が必要です。

例えば、「class1」と「class2」という2つのクラスを持つDIVタグがあった場合、

<div class="class1 class2">
    //～～～
</div>

次のように、半角スペースで区切ってクラス名を列記することで判定することもできますが、

if ($('div').hasClass('class1 class2')) {
    //～～～
}

指定するクラス名の順番が変わると、falseになってしまいます。

if ($('div').hasClass('class2 class1')) {
    //～～～
}

というのも、指定する文字列が完全一致でなければならないためです。
厳密に調べるには、OR条件で指定することになりますが、クラスが3つも4つもあると、その分コードが冗長になってしまいます。

if ($('div').hasClass('class1') && $('div').hasClass('class2') && $('div').hasClass('class3')) {
    //～～～
}

そこで、複数のクラスにも対応したhasClasses()を作成します。

function.js

$.fn.extend({
    hasClasses: function(selector) {

        if (typeof selector == 'string') {
            selector = (selector.match(/^\./)) ? selector.replace(/^\./, '').split('.') : $.trim(selector).split(' ');
        }

        for (var i = 0, hit = 0, len = selector.length; i < len; i++) {
            if (this.hasClass(selector[i])) {
                hit++;
            }
        }

        return (hit === len);
    }
});

このhasClasses()を使うと、次のように複数のクラスを指定することができます。

$('div').hasClasses('class1 class3 class2');

$('div').hasClasses(['class3', 'class2', 'class1']);

以上です。