jQuery API の data( obj ) は、マッチしたDOM要素と任意のデータを関連付けるメソッド。
引数
- obj
キーと値のペアのオブジェクト。
戻り値
- jQuery
jQueryオブジェクト。
記述方法
jQuery( セレクター ) . data( { キー1: 値1, キー2: 値2, キー3: 値3 } )
「セレクター」にマッチした要素に、{ キー1: 値1, キー2: 値2, キー3: 値3 }のデータを関連付ける。
記述例
jQuery( '#sample' ) . data( { name: 'Tarou', area: 'Tokyo' } )
idが「sample」であるDOM要素に、{ name: 'Tarou', area: 'Tokyo' }のデータを、関連付ける。
実装例（サンプル）
- 名前：
- 点数
- 数学：
- 科学：
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample' ) . data( { name: '日本太郎', score: { mathematics: 85, science: 70 } } )
jQuery( '#jquery-sample-name' ) . text (
jQuery( '#jquery-sample' ) . data( 'name' )
);
jQuery( '#jquery-sample-score-mathematics' ) . text (
jQuery( '#jquery-sample' ) . data( 'score' ) . mathematics
);
jQuery( '#jquery-sample-score-science' ) . text (
jQuery( '#jquery-sample' ) . data( 'score' ) . science
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample' ) . data( { name: '日本太郎', score: { mathematics: 85, science: 70 } } )
jQuery( '#jquery-sample-name' ) . text (
jQuery( '#jquery-sample' ) . data( 'name' )
);
jQuery( '#jquery-sample-score-mathematics' ) . text (
jQuery( '#jquery-sample' ) . data( 'score' ) . mathematics
);
jQuery( '#jquery-sample-score-science' ) . text (
jQuery( '#jquery-sample' ) . data( 'score' ) . science
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample {
color: #333333;
list-style-type: square;
}
-->
</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>
<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>