複数のクラス名の存在を確認（判定）

複数のクラス名の存在を確認（判定）するには、以下の方法で可能です。

定義

jQuery.fn.hasClasses = function(selector, orFlag) { var i, len, hitCount = 0; if (typeof selector === 'string') { selector = (selector.match(/^\./)) ? selector.replace(/^\./, '').split('.') : jQuery.trim(selector).split(' '); } for (i = 0, len = selector.length; i < len; i++) { if (this.hasClass(selector[i])) { hitCount++; } } if (orFlag) { if (hitCount > 0) return true; } else { if (hitCount === len) return true; } return false; };

使い方

第一引数にはこれまで通り1つのクラス名の指定に加え、複数の指定方法としてスペース区切り、ドット繋ぎ、配列を指定することができます。
また、通常はAND判定ですが、第二引数にtrueを指定することでOR判定として確認が行えます。
戻り値は一致した場合はtrue、一致しなかった場合はfalseを返します。

【構文】

var result = element.hasClasses(selector[, or flag]);

要素	element	jQueryオブジェクト化した要素
第一引数	selector	判定するクラス名（セレクタ―）の文字列または配列
第二引数	or flag	指定したクラス名（セレクタ―）の何れかが一致させたいための指定 省略可能 設定可能値：   true = 有効   false = 無効（初期値）
戻り値	result	一致した場合はtrue、一致しなかった場合はfalseを返す

【サンプルコード】

【HTML】

<p id="sample" class="foo">sample</p>

【JavaScript】

// 通常（AND判定） var result1 = $('#sample').hasClasses('foo'); var result2 = $('#sample').hasClasses('foo bar'); var result3 = $('#sample').hasClasses('.foo.bar'); var result4 = $('#sample').hasClasses(['foo', 'bar']); // OR判定 var result5 = $('#sample').hasClasses('foo bar', true); var result6 = $('#sample').hasClasses('.foo.bar', true); var result7 = $('#sample').hasClasses(['foo', 'bar'], true); console.log('result1', result1); console.log('result2', result2); console.log('result3', result3); console.log('result4', result4); console.log('result5', result5); console.log('result6', result6); console.log('result7', result7);