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

jQuery.hasData( )要素にデータがあるかチェック

構文

要素にデータがあるかチェック返値：true/false
jQuery.hasData( DOM要素 )ver1.5〜

機能

jQuery.dataメソッドやdataメソッドにによって要素にデータが設定されているか否かチェックします。引数にはDOM要素を利用しなければならないことに注意して下さい。

html5のデータ属性によって設定されたデータをチェックすることはできません。またイベントが設定された要素ではtrueとなることに注意して下さい。

解説

要素にデータがあるかチェックします

サンプル（jHasData/01.html）を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryでは、まず以下の部分を確認してください。dataメソッドを利用してdiv要素にnameプロパティ（値はjohn）を設定しています。 

$("div").data("name", "john");

続いて以下の部分を確認して下さい。buttonがクリックされたらjQuery.hasDataメソッドを利用してdiv要素にデータがあるか否かチェックします。結果は変数chkに代入してアラートで表示します。引数にjQueryオブジェクトを設定しているように見えますが、後に[0]と追加することでjQueryオブジェクトから最初のDOM要素を取得しています。jQueryオブジェクトは利用できないので気を付けてください。 

$("button").click(function(){
	var chk = $.hasData($("div")[0]);
	alert(chk);
});

データが設定されているため、buttonをクリックすると「true」とアラートで表示されます。

データが設定されていないサンプル

データが設定されていないサンプルも確認しておきます。サンプル（jHasData/02.html）を開いて、ほとんどjHasData/01.htmlと同じ事を確認してください。

異なるのはdataメソッドを利用していないことです。そのためdiv要素にデータは設定されていません。結果として、buttonをクリックするとアラートで「false」と表示されます。

メモ

html5のデータ属性はチェックできません

jQuery.hasDataメソッドはhtml5の「タグに設定されたデータ属性」を取得することができず、チェックできません。データ属性についてはdataメソッドの「メモ」を確認してください。サンプル（jHasData/test01.html）を開いてbody内のdiv要素に以下の様にデータ属性が設定されていることを確認してください。 

<div data-name="john"></div>

jQuery.hasDataメソッドを利用してチェックする部分はjHasData/01.htmlから変更ありません。結果として、buttonをクリックすると「false」と表示され、データ属性を認識できていないことが確認できます。

イベントハンドラが設定してあるとtrueになります

jQuery.hasDataメソッドはチェックする要素にイベントハンドラが設定してあると、データが無くても「true」を返します。これはバグではなく、イベントハンドラが要素にデータとして設定されているためです。そのためデータの存在を確認できないので、データを設定する要素はイベントハンドラが設定されていない要素を利用するようにしましょう。

サンプル（jHasData/test02.html）を開いてdiv要素にデータが設定されていないことを確認してください。しかし以下の様にdiv要素にイベントハンドラを設定しています。 

$("div").click(function(){
	alert("ok");	
});

buttonをクリックすると、div要素にはデータが設定されていませんが、イベントハンドラが設定されているためアラートで「true」と表示されます。

dataメソッドでは代わりはできませんでした（しかも空のデータを付けてしまいます）

dataメソッドはデータが取得できるため、代わりに利用できそうですが「できません」でした。dataメソッドは要素にデータが無い場合でも空のobjectオブジェクトを返します。サンプル（jHasData/test03.html）では以下の様にdataメソッドを利用してデータを取得しています。 

$("button").click(function(){
	var chk = $("div").data();
	alert(chk);
});

結果として、div要素にデータが無いにもかかわらずbuttonをクリックするとアラートで「object Object」と表示され、データの有無は判断できません。

さらにjHasData/test03.htmlのようにデータの設定されていない要素にdataメソッドを利用すると、空のデータを設定してしまいます。サンプル（jHasData/test03b.html）を開いてbuttonが2つ（id属性はstep1とstep2）になっているのを確認してください。 

<button id="step1">step1</button>
<button id="step2">step2</button>
<div></div>

step1のボタンに設定したjQueryは以下の様にjHasData/test03.htmlと同じです。step2のボタンに設定した処理は$.hasDataメソッドを利用してdiv要素にデータがあるかを確認し結果をアラートで表示するようにしました。 

$("#step1").click(function(){
	var chk = $("div").data();
	alert(chk);
});
$("#step2").click(function(){
	var chk = $.hasData($("div")[0]);
	alert(chk);
});

まずstep2のボタンをクリックしてdiv要素にはデータが無いことを確認してください（アラートでfalseと表示されます）。その後でstep1ボタンをクリックしてください（jHasData/test03.htmlと同じように「object object」と表示されます）。その後で再びstep2ボタンをクリックすると「true」と表示されてしまいます。

この結果から何もデータを設定していない要素にdataメソッドを利用すると、データを設定してしまうことが確認できます。