jQuery.data(element, [key], [value])


version 1.2.3 以降

解説

setter

DOM要素に、任意のデータを関連付けます。

通常の使用では、jQueryオブジェクトに対するメソッドの data([key], [value]) の方が使いやすいです。

引数

  • element
    Element: 関連付け先のDOM要素
  • key
    String: データのキー
  • value
    Object: データ

戻り値

  • jQuery: jQuery オブジェクト

getter

DOM要素に関連付けたデータを取得します。

引数

  • element
    Element: 関連付け先のDOM要素
  • [key]オプション
    String: データのキー

戻り値

  • Object: キーに対応する関連付けたオブジェクト。
    キーを省略した場合は、空オブジェクト、もしくは要素に関連付けられているデータを含む内部オブジェクト。(使用上の注意)

関連


「data」ボタンを押すと、p 要素に "p_data_key" というキーで "data associated !" というデータを関連付けます。
「removeData」ボタンを押すと、p 要素に関連付けたデータを削除します。

p 要素をクリックして、関連付けられたデータを表示してみてください。

// P要素をクリック
$("#test_result p").click(function(){
    alert($.data(this, "p_data_key"));
});

// data ボタンをクリック
$("#data").click(function(){
    $("#test_result p").each(function(i){
        $.data(this, "p_data_key", "data associated !");
    });
});

// removeData ボタンをクリック
$("#removeData").click(function(){
    $("#test_result p").each(function(i){
        $.removeData(this, "p_data_key");
    });
});


P要素

P要素

P要素


jQuery.data(element) 使用上の注意

キーを指定せず、DOM要素のみを引数に指定した場合は、内部拡張オブジェクトを返します。(Ver 1.4)

Ver 1.4では、要素の状態によってオブジェクトが変化します。
例えば、要素にイベントハンドラがバインドされている場合は、イベントオブジェクト等が含まれます。

データが何も関連付けられておらず、イベントハンドラ等もバインドされていない場合は、空オブジェクトを返します。 ($.isEmptyObject( jQuery.data(element) ) == true)


また、Ver 1.3までは、jQuery が内部的に付与するユーニークIDを返していました。


このように、このメソッドは内部使用向けであり、バージョンによっても動作が異なりますので、特別な場合以外は使用しない方が良いと思います。 通常は、jQueryオブジェクトに対するメソッドのdata([key], [value])を使用して下さい。