ITコラム

プログラミングノウハウ

2018.10.25

#jQuery入門

jQuery【 data 】要素に紐付けてデータを設定・取得

jQuery の data メソッドを使用すると、指定した要素に紐付けてデータを設定したり取得したりすることができます。
今回は、jQuery の data メソッドの使い方について解説いたします。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. data メソッド
2. data でデータの設定と取得
- データの設定
- データの取得
3. まとめ

1. data メソッド

　
data メソッドは、引数によって 4 通りの記述方法があります。

$(セレクタ).data( );

$(セレクタ).data( key, value );

$(セレクタ).data( obj );

$(セレクタ).data( key );

data メソッドの引数の内容は、それぞれ以下の通りです。

.data( key, value )

key
要素に紐付ける値のキーとなる文字列を指定
value
要素に紐付ける値を指定（javaScript の型の値を複数指定可能）

.data( obj )

obj
キーと値のペアのオブジェクトを指定

.data( key )

key
要素に紐付いているキーを指定（データ取得時）

▲目次へ戻る

2. data でデータの設定と取得

　
data メソッドを使用して、要素に紐付けるデータの設定と取得を行います。
データのキーと値を入力して、設定ボタンをクリックしてみて下さい。

キー：

値　：

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#btn1").on("click", function() {

    const wk_key = $("#key1").val();
    const wk_dat = $("#dat1").val();

　　// データを設定
    $("#div1").data(wk_key, wk_dat);

　　// データを取得
    $("#spn1").text("【キー：" + wk_key 
      + "】【値：" + $("#div1").data(wk_key)
      + "】としてデータが設定されました。");
  });
});
</script>

<div id="div1" style="background-color : #CCC; padding : 20px;">
  <div style="display:inline-flex; align-items:center;">
    キー：<input type="text" id="key1">
  </div><br>
  <div style="display:inline-flex; align-items:center;">
    値　：<input type="text" id="dat1">
  </div><br>
  <input type="button" id="btn1" value="設定">
  <span id="spn1">　</span>
</div>

データの設定

「$("#div1").data(wk_key, wk_dat);」として、データの設定を行っています。
上のサンプルでは、id=”div1″ の div 要素に紐付けてデータを設定していますが、「$("body").data(キー, 値);」として body 要素に紐付けることもできます。