jQuery . data( element, key )

jQuery API の jQuery . data( element, key ) は、elementに指定したDOM要素に関連付いているデータから、keyに対応する値を取得するメソッド。

data( key ) メソッドを使った方が便利なことが多い。

引数

element

データが関連付いているDOM要素。

key

データのキー。

文字列。

戻り値

Object

オブジェクト。

記述方法

jQuery . data( 要素, キー )

「要素」にマッチしたDOM要素に関連付いているデータから、「キー」に対応する値を取得する。

記述例

jQuery . data( div, 'area' )

div要素に関連付いているデータから、キー「area」に対応する値を取得する。

実装例(サンプル)

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

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

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-sample-name' ) . each( function() {
        jQuery. data( this, 'name', '日本太郎' );
    } );
    jQuery( '#jquery-sample-score' ) . each( function() {
        jQuery. data( this, 'score', { mathematics: 85, science: 70 } );
    } );
    jQuery( '#jquery-sample-name' ) . each( function() {
        var name = jQuery. data( this, 'name' );
        jQuery( this ) . text ( name );
    } );
    jQuery( '#jquery-sample-score' ) . each( function() {
        var mathematics = jQuery. data( this, 'score' ) . mathematics;
        var science = jQuery. data( this, 'score' ) . science;
        jQuery( '#jquery-sample-score-mathematics' ) . text ( mathematics );
        jQuery( '#jquery-sample-score-science' ) . text ( 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, Utilities, データ タグ: パーマリンク