web-dev-qa-db-ja.com

HTML要素にデータ属性を設定する方法

属性data-myval = "10"を持つdivがあります。その値を更新したいです。 div.data('myval',20)を使っても変わりませんか？ div.attr('data-myval','20')のみを使う必要がありますか？

HTML5とjQueryの間で混乱していますか？お知らせ下さい。ありがとうございます。

編集：div.data('myval')=20をdiv.data('myval',20)に更新しましたが、それでもHTMLは更新されません。

jqueryhtmlcustom-data-attribute
184
Pulkit Mittal

HTML

<div id="mydiv" data-myval="10"></div>

JS

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

デモ

参考文献

参照から：

jQuery自体は.data()メソッドを使用して 'events'および 'handle'という名前で情報を保存します。また、内部使用のためにアンダースコア（ '_'）で始まるデータ名も予約します。

JQueryのdata()はHTMLのdata属性を変更しないことに注意してください。

そのため、HTMLのdata属性を変更する必要がある場合は、代わりに.attr()を使用してください。

HTML

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

JS：

alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>

このデモを見る

363
Jashwant

次のようなattrも使えます。

HTML

<div id="mydiv" data-myval="JohnCena"></div>

スクリプト

 $('#mydiv').attr('data-myval', 'Undertaker'); // sets 
 $('#mydiv').attr('data-myval'); // gets

OR

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value
31
Baqer Naqvi

Javascriptでhtml5 data-属性を変更してもjQueryの.data()は更新されないことに注意してください。

JQueryの.data()を使ってHTML要素のdata-属性を設定する場合は、jQueryの.data()を使ってそれらを読むことをお勧めします。それ以外の場合は、属性を動的に更新すると矛盾が生じる可能性があります。たとえば、以下のsetAttribute()、dataset()、attr()を参照してください。値を変更し、ボタンを数回押してコンソールを見てください。

$("#button").on("click", function() {
  var field = document.querySelector("#textfield")

  switch ($("#method").val()) {
    case "setAttribute":
      field.setAttribute("data-customval", field.value)
      break;
    case "dataset":
      field.dataset.customval = field.value
      break;
    case "jQuerydata":
      $(field).data("customval", field.value)
      break;
    case "jQueryattr":
      $(field).attr("data-customval", field.value)
      break;
  }

  objValues = {}
  objValues['$(field).data("customval")'] = $(field).data("customval")
  objValues['$(field).attr("data-customval")'] = $(field).attr("data-customval")
  objValues['field.getAttribute("data-customval")'] = field.getAttribute("data-customval")
  objValues['field.dataset.customval'] = field.dataset.customval

  console.table([objValues])
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Example</h1>
<form>
  <input id="textfield" type="text" data-customval="initial">
  <br/>
  <input type="button" value="Set and show in console.table (F12)" id="button">
  <br/>
  <select id="method">
    <option value="setAttribute">setAttribute</option>
    <option value="dataset">dataset</option>
    <option value="jQuerydata">jQuery data</option>
    <option value="jQueryattr">jQuery attr</option>
  </select>
  <div id="results"></div>
</form>
30
Johann Echavarria

バニラジャバスクリプトソリューション

HTML

<div id="mydiv" data-myval="10"></div>

JavaScript：

  • DOMの getAttribute() プロパティを使う

     var brand = mydiv.getAttribute("data-myval")//returns "10"
 mydiv.setAttribute("data-myval", "20")      //changes "data-myval" to "20"
 mydiv.removeAttribute("data-myval")         //removes "data-myval" attribute entirely

  • JavaScriptの dataset プロパティを使う

    var myval = mydiv.dataset.myval     //returns "10"
mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
mydiv.dataset.myval = null          //removes "data-myval" attribute
19
rajesh kakawat

JQueryを使用している場合は、.data()を使用します。

div.data('myval', 20);

.data()を使って任意のデータを格納できますが、.attr()を使うときは文字列だけに制限されます。

7
Blender

[jQuery] .data（）vs .attr（）vs .extend（）

JQueryのメソッド.data()は、正しければ、このメソッドを使ってjQueryが管理する内部オブジェクトを更新します。

もしあなたがあなたのdata-attributesをいくらかの広がりで更新したいのなら、 - を使ってください。

$('body').attr({ 'data-test': 'text' });

そうでなければ、$('body').attr('data-test', 'text');はうまく動きます。

あなたがこれを達成することができるもう一つの方法は - を使うことです

$.extend( $('body')[0].dataset, { datum: true } );

- 属性の変更をHTMLElement.prototype.datasetに制限します。追加のHTMLElement.prototype.attributesはありません。

3
Cody

Data-属性を設定する別の方法は、 dataset プロパティを使用することです。

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true
0
CloudBranch