@tanakashiの技術ブログ

jQueryの値を利用する際、普段 data-***attr で取得し〜などを行なっていたのだが、data()で簡単に処理できることを知ったのでそちらのまとめ。

data()

data()メソッドを利用すると、HTML要素内に付与されたdata属性に関して、取得・設定・変更などが簡単に行えるようになる。
data属性は「data-***」のように、data-から始まる属性のことを指す。

例)

<div id="test" data-id="1" data-name="testtest">テスト</div>  

data属性へ任意の値を渡すことによって、あとからjQueryで利用しやすくする。

値の取得

上記のコードに対してスクリプトを走らせる。

<script>  
console.log($('#test').data());  
</script>  

実行結果

{id: 1, name: "testtest"}  

ひとつの要素だけ取得したい場合は以下の通り

<script>  
console.log($('#test').data('id'));  
</script>  

値の設定

<script>  
console.log($('#test').data('key', 'key-name'));  
</script>  

こちらはattrの時と同様の使い方でOK。

data() と attr() の違い

attr()は主に属性名と値に関して関わるが、data()の場合はdata属性に利用が限定される。
そのため接頭語の「data-」を省いて省略ができるため、冗長化を防ぐことができる。

この記事へのコメント

まだコメントはありません