jQueryエラーでカスタムデータ属性を設定する

Question

私はこれを回避することはできません。私はいくつかの要素にdata-diff属性を追加しようとしました。仕事をしているようですが、htmlにそのような属性は表示されません。大したことない私は、思った開発ツールを開いて、思考の私の道はこのように行ったん：

console: $(obj).data('diff','10'); 

output: [div.cont] 

良い、のは、属性をチェックしてみましょう：

console: $(obj).data('diff') 

output: "10" 

は再び、この属性を設定できます素晴らしいですが、まだHTMLには表示されません。これをチェックしてみましょう：

console: $(obj)[0] 

output: 

    <div class="cont" data-month="8" data-round="1"> 
     (Tom) 8 
     <div class="secCol">AUG</div> 
    </div> 

確かに何のデータ-diffは私がこれを試すかもしれない場合は、ありません。

console: $(obj)[0].data('diff','10') 

output: Uncaught TypeError: $(...)[0].data is not a function(…) 

私はそれが（すでにthis読み）のjQueryオブジェクト対DOM要素とは何かを持っていると思いますが、私はしようとする他に何かわかりません。

$('.cont[data-round="'+round+'"]').each(function(i, obj) { 
    var month = $(obj).data('month'); 
    var diff = Math.abs(myMonth-month); 
    $(obj).data('diff', diff);//Here is the problem 
}); 

Answer 1

これは正常な動作です。

jQueryのdata()方法のセッターは DOM内のすべてのdata-*の属性を保持するメモリでjQueryの店舗オブジェクトを更新します。値を取得して設定するのにdata()しか使用しない限り、これは問題ではありません。実際、それはより速いです。

DOM内に実際にdata-*属性が表示されるようにするには、attr()を使用する必要がありますが、効率は低くなります。

また

var $foo = $('.foo[data-bar="fizz"]') 

あなたはそれがメモリ内だことによって、要素を選択したい場合は、たとえば：あなたは他の属性を同じように、それはDOMにdata-*属性だことで

$(obj).attr('data-diff', diff); 

あなたは、要素を選択することができますデータ属性（あなたが属性を設定するdata()を使用する場合と同様に）、filter()を使用します。

var $foo = $('.foo').filter(function() { 
    return $(this).data('bar') === 'fizz'; 
}); 

Answer 2

jQueryの.data()方法は、単にそれをしない：これは私のコードです。 はdata-fooの属性をDOM要素から読み込みますが、決して追加しません。

jQueryと、それらの属性（おそらくいくつかのCSSが含まれているかもしれません）を見つけようとしている他のフレームワークと混合しない限り、DOMに属性を入れるのはあまり意味がありません。