data

.data(filter)

data-*属性にマッチした要素を処理します。

// GET
.data('name');

// SET
.data('name', 'value');
.data({ name1: 'value', name2: 'value2' });

パラメータ

GET

name: string

取得したい要素のdata-*属性名。 同名の属性が複数ある場合、最初にマッチした属性の要素が対象です。

SET

name: string

値をセットしたい要素のdata-*属性名。 マッチした全ての属性の要素が対象です。

value: string

属性に指定したい値。 デフォルト値は属性名になります。

戻り値

GET

string

data-*属性の値。

SET

u

Umbrellaのインスタンスを返します。

例

data-idの値を取得します。

HTML

<ul>
  <li data-id='0'>First</li>
  <li data-id='1'>Second</li>
  <li data-id='2'>Third</li>
</ul>

JavaScript

u('ul li').first().data('id'); // 0

data-idを指定します。

u('ul li').first().data({ id: '1' }); // <li data-id='1'>First</li>

u('ul li').first().data('id', '2'); // <li data-id='2'>First</li>

デモ

"デモ用文字列"をクリックすると、 "デモ用文字列"の要素にdata-text='demo text'を追加して'demo text'と表示します。

JavaScript

u('#demo').on('click', function() {
  u(this).data('text', 'demo text');
  u('#demo div').append('<span>' + u(this).data('text') + '</span>');
});

HTML

<div id="demo">デモ用文字列<div></div>
</div>

関連項目

.attr() 属性にマッチした要素を処理します。