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

colmun_main12322

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

目次

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

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() {

    var wk_key = $("#key1").val();
    var 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 要素に紐付けることもできます。

データの取得

データを取得する際には、キーを指定して値を取得します。
上のサンプルでは、「 $(“#div1”).data(wk_key) 」という記述がデータの取得にあたります。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です