カスタムデータ属性(data-*)の値に複数設定、それを取得する方法

created at:

カスタムデータ属性(data-*)は基本、属性値を1つのみしか設定できませんが、いわゆる配列オブジェクト化させることで複数設定が可能になります。

以下方法です。

複数設定パターン

1. 配列

<div id="id1" data-test1='["name","age","sex"]'></div>

2. オブジェクト

<div id="id2" data-test2='{"name":"名前","age":"年齢","sex":"性別"}'></div>

取得方法

var arr = $('#id1').data('test1');
var obj = $('#id2').data('test2');
console.log(arr[1]); // age
console.log(obj.name);  // 名前

注意点

要素の括りについて

複数設定する時は必ずシングルクォーテーションで囲んで、中の文字列はダブルクォーテーションで囲みましょう。

デモ(成功パターン)

https://jsfiddle.net/z56ryn6L/

demo2

デモ(失敗パターン)

https://jsfiddle.net/z56ryn6L/1/

demo1

失敗パターンでは、配列時は全体が文字列と化しているので、そこから何番目のものかを取得してきています。 オブジェクトの場合はkeyからvalueを参照できません。

ちなみにvalue部分に数値が入る時はダブルクォーテーションで囲まなくても大丈夫ですが、01や001といった場合は判定されないようです。

取得時のメソッド

カスタムデータ「属性」ではあるのですが、配列とオブジェクトを設置している時に attr() で対応すると上記の失敗パターンと同じ結果で返ってきます。

デモ(失敗パターン)

https://jsfiddle.net/z56ryn6L/2/

attr() 自体はあくまでも属性名を取得してvalueを返すメソッドで、 data() はkeyやobjectとして取得してきてくれるメソッドなので、対応できるようです。

配列やオブジェクトのように複数設定した属性取得の場合は data() で行うようにしましょう。

undefinedについて

データ値として判定できないので、この時に限り使用できません。

当たり前ですが文字列として設定すれば取得できます。

<div id="id3" data-test3='{"key1":"value1","key2":"value2","key3":"undefined"}'></div>
<div id="id4" data-test4='{"key1":"value1","key2":"value2","key3":undefined}'></div>
// 成功例 -- オブジェクトで返ってくる
var obj1 = $('#id3').data('test3');
console.log(obj1);
// Object {key1: "value1", key2: "value2", key3: "undefined"}
//  key1:"value1"
//  key2:"value2"
//  key3:"undefined"

// 失敗例 -- 文字列で返ってくる
var obj2 = $('#id4').data('test4');
console.log(obj2);
// {"key1":"value1","key2":"value2","key3":undefined}

また、現状jQueryではなく、ネイティブJavaScriptで上記のようにデータ属性の配列・オブジェクトを取得する方法は見つけられませんでした…(文字列として返ってくる)。情報求む。

参考記事

アーカイブ一覧へ戻る

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
トップページに戻る