裏紙に書く程度の内容

jQuery dataメソッドでhtml5のデータ属性を扱う

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

dataメソッドを使って情報を保存し利用しよう

についてです。

dataメソッドとは

jQueryオブジェクトには任意のデータを保持させることが出来ます。

obj.data(オブジェクト);

val()等と同じような使い方で、引数を空にするとデータを取得、引数を指定するとデータのセットとなります。

使い方例

例えばこんな使い方。

<ul id='user-list'>
    <li>user1
    <li>user2
    <li>user3
</ul>

<div id='user-info'>
    <span id='user-info-name'>name</span>
    <span id='user-info-age'>age</span>
</div>
// データを保持させる
$(document).ready(function () {
    $('#user-list li:nth-child(1)').data({name: 'Honda', age: '18'});
    $('#user-list li:nth-child(2)').data({name: 'Yamaha',  age: '20'});
    $('#user-list li:nth-child(3)').data({name: 'Kawasaki', age: '32'});
});

// リストのクリックイベント
$('#user-list').on('click', 'li', function() {
    var obj = $(this).data();
    $('#user-info-name').text( obj.name );
    $('#user-info-age').text( obj.age );
});

data()メソッドを使ってリストの各要素にデータを保持させています。
リストの要素クリック時にはそのデータを画面上に表示させています。

  • user1
  • user2
  • user3

name
age

data-* とあわせて使う

data()メソッドはhtml5のdata-*に対応しています。
使用する場合、data-に続く名前がプロパティ名になります。

上記の例でいえば以下のような感じに書き換えられます。

<ul id='user-list'>
    <li data-name='Honda' data-age='18'>user1
    <li data-name='Yamaha' data-age='20'>user2
    <li data-name='Kawasaki' data-age='32'>user3
</ul>

<div id='user-info'>
    <span id='user-info-name'>name</span>
    <span id='user-info-age'>age</span>
</div>
$('#user-list').on('click', 'li', function() {
    var obj = $(this).data();
    $('#user-info-name').text( obj.name );
    $('#user-info-age').text( obj.age );
});

  • user1
  • user2
  • user3

name
age

これは知らなかった。

結論

HTML5のデータ属性(data-*)を使用する場合はかなり使い勝手のいいメソッドなので覚えておこう。

Index