data( key, value )

jQuery API の data( key, value ) は、マッチしたDOM要素と任意のデータを関連付けるメソッド。

引数

key

データのキー。

文字列。

value

新しいデータの値。

配列やオブジェクトなど、任意のJavaScriptの型で指定。

戻り値

jQuery

jQueryオブジェクト。

記述方法

jQuery( セレクター ) . data( キー,)

「セレクター」にマッチした要素に、「キー」と「値」のデータを関連付ける。

記述例

jQuery( '#sample' ) . data( 'area', 'tokyo' )

idが「sample」であるDOM要素に、キーが「area」で、値が「tokyo」のデータを、関連付ける。

jQuery( '#sample' ) . data( 'score', { mathematics: 85, science: 70 } )

idが「sample」であるDOM要素に、データ「'score', { mathematics: 85, science: 70 }」を関連付ける。

実装例(サンプル)

  • 名前:
  • 点数
    • 数学:
    • 科学:

実装例(サンプル)のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-sample-name' ) . data( 'name', '日本太郎' )
    jQuery( '#jquery-sample-score' ) . data( 'score', { mathematics: 85, science: 70 } )
    jQuery( '#jquery-sample-name' ) . text (
        jQuery( '#jquery-sample-name' ) . data( 'name' )
    );
    jQuery( '#jquery-sample-score-mathematics' ) . text (
        jQuery( '#jquery-sample-score' ) . data( 'score' ) . mathematics
    );
    jQuery( '#jquery-sample-score-science' ) . text (
        jQuery( '#jquery-sample-score' ) . data( 'score' ) . science
    );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-sample {
    color: #333333;
    list-style-type: square;
}
-->
</style>

HTML

<ul id="jquery-sample">
    <li>名前:<span id="jquery-sample-name"></span></li>
    <li>点数
        <ul id="jquery-sample-score">
            <li>数学:<span id="jquery-sample-score-mathematics"></span></li>
            <li>科学:<span id="jquery-sample-score-science"></span></li>
        </ul>
    </li>
</ul>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, その他諸々, データ, データストレージ タグ: パーマリンク