デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.hasClass( )クラスの有無を調査

構文

クラスの有無を調査返値:ブール値
jQo.hasClass( クラス名 )ver1.2〜

機能

jQueryオブジェクトで指定した要素で引数に設定したクラスが有るかどうかを調査します
有る場合はtrueを、無い場合はfalseを返します。

解説

クラス属性の有無を調べます

サンプル(hasClass/01.html)を開いてbody内にredのクラス属性が追加されたdiv要素があることを確認して下さい。

<div class="red">redのクラスが付いたdiv要素</div>

jQueryは以下の様に記述され、buttonをクリックするとhasClassメソッドを利用してdiv要素にredのクラス属性があるかを調査し、アラートで結果を表示します。

$("button").click(function(){
	var ans = $("div").hasClass("red");
	alert(ans)
})

サンプルではdiv要素にredのクラス属性があるので、アラートで「ture」と表示されます。

指定したクラス属性が無いサンプルも確認しておきましょう。サンプル(hasClass/01b.html)を開いてdiv要素からredのクラス属性が外されたことを確認してください。

<div>クラス属性のないdiv要素</div>

jQueryはhasClass/01.htmlから変更ありません。buttonをクリックするとredのクラス属性がないためアラートで「false」と表示されます。

複数のクラスでもOK

調べたい要素に複数のクラスが設定されていても、引数で指定したクラスがあればtrueを返します。
サンプル(hasClass/02.html)を開いてbody内のdiv要素に「red」と「bold」2つのクラス属性が設定されていることを確認してください。

<div class="red bold">redとboldのクラスが付いたdiv要素</div>

jQueryは以下の様にhasClass/01.htmlから変更ありません。

$("button").click(function(){
	var ans = $("div").hasClass("red");
	alert(ans)
})

hasClassはredのクラス属性のみの有無を調べるので、他のクラス属性は関係ありません。redのクラス属性があるのでbuttonをクリックすると「true」と表示されます。

メモ

複数のクラス属性の有無を調べる

hasClassメソッドで複数のクラス属性の有無を調査できるか調べてみました。結果は限定的にはできるが実用的ではありませんでした。

サンプル(hasClass/test01.html)を開いてdiv要素に「red」と「bold」2つのクラス属性が設定されていることを確認してください。

<div class="red bold">redとboldのクラスが付いたdiv要素</div>

jQueryは以下の様に記述され、引数は1つですがクラス名を半角スペースで区切って表記します。

$("button").click(function(){
	var ans = $("div").hasClass("red bold");
	alert(ans)
})

buttonをクリックすると「true」と表示され、正常に機能しているように見えますが実用的ではありません。何故かというと完全一致の場合のみしか判定しないためです。サンプル(hasClass/test01b.html)を開いてbody内の構成に変更がないことを確認してください。

jQueryも変更内容に見えますが、redとboldの間の半角スペースを1つから2つに増やしています。
※以下の例では便宜的に半角スペースを_で表記しています。

$("button").click(function(){
	var ans = $("div").hasClass("red__bold");
	alert(ans)
})

結果としては完全には一致していないため、buttonをクリックすると「false」となります。利用しようと思えば利用できるかもしれませんが実用的ではありません。

ちなみにhasClassメソッドに複数の引数を設定しても最初の引数しか調査しません。サンプル(hasClass/test02.html)ではjQueryで以下の様に記述していますが、この場合は最初の引数「red」の有無しか調査しません。

$("button").click(function(){
	var ans = $("div").hasClass("red","bold");
	alert(ans)
})

div要素にはboldのクラス属性しかないため、red属性はなくbuttonをクリックすると「false」と表示されます。

valメソッドは引数に配列を設定して複数の要素に対応できます。なのでhasClassメソッドでも試してみたのですがダメでした。→。サンプル(hasClass/test03.html

$("button").click(function(){
	var ans = $("div").hasClass(["red","bold"]);
	alert(ans)
})

buttonをクリックしても、サンプルhasClass/test02.htmlと同じように「false」となります。