DOMへのデータ属性の追加

$('div').data('info', 1);

alert($('div').data('info'));
//this works    

$('div[data-info="1"]').text('222');
//but this don't work

jquery内に要素を作成しています。その後、属性「データ」を追加したいと思います。彼は好きで追加されていますが、DOMではこれは明らかではなく、次を使用してアイテムを取得できません

$('div[data-example="example"]').html()

jsfiddle

次の.data()方法を使用します。

$('div').data('info', '222');

これは実際のdata-info属性を作成しないことに注意してください。属性を作成する必要がある場合は、次を使用します.attr()。

$('div').attr('data-info', '222');

jQueryの.data（）は2つのことを行いますが、データを属性としてDOMに追加しません。これを使用してデータ属性を取得する場合、最初に行うことはjQueryデータオブジェクトを作成し、オブジェクトの値をデータ属性に設定することです。その後、それは本質的にdata属性から切り離されます。

例：

<div data-foo="bar"></div>

を使用して属性の値を取得した場合、.data('foo')期待どおりに「bar」が返されます。次にを使用.attr('data-foo', 'blah')して属性を変更し、後でを使用.data('foo')して値を取得すると、DOMがと言っても「bar」を返しますdata-foo="blah"。を使用.data()して値を設定すると、jQueryオブジェクトの値は変更されますが、DOMの値は変更されません。

基本的に.data()は、jQueryオブジェクトのデータ値を設定またはチェックするためのものです。チェックしていて、まだ持っていない場合は、DOM内のデータ属性に基づいて値を作成します。.attr()DOM要素の属性値を設定またはチェックするためのものであり、jQueryデータ値には触れません。両方を変更する必要がある場合は、.data()との両方を使用する必要があります.attr()。それ以外の場合は、どちらかにこだわってください。

Jqueryの「データ」はデフォルトでは更新されません：

alert($('#outer').html());
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').data("myval","20"); //setter
alert($('#outer').html());

ライブアップデートの代わりに「attr」を使用します。

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

 $(document.createElement("img")).attr({
                src: 'https://graph.facebook.com/'+friend.id+'/picture',
                title: friend.name ,
                'data-friend-id':friend.id,
                'data-friend-name':friend.name
            }).appendTo(divContainer);

を使用.data()すると、その要素のjQueryオブジェクトにデータが追加されるだけです。要素自体に情報を追加するには、jQuery .attrまたはネイティブを使用してその要素にアクセスする必要があります.setAttribute

$('div').attr('data-info', 1);
$('div')[0].setAttribute('data-info',1);

属性が設定された要素にアクセスするには、投稿（$('div[data-info="1"]')）でメモしたように、その属性に基づいて選択するだけですが、使用する.data()場合はできません。.data()設定に基づいて選択するには、jQueryのフィルター関数を使用する必要があります。

jsFiddle Demo

$('div').data('info', 1);
//alert($('div').data('info'));//1

$('div').filter(function(){
   return $(this).data('info') == 1; 
}).text('222');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>

からテキストを取得するには

<option value="1" data-sigla="AC">Acre</option>

uf = $("#selectestado option:selected").attr('data-sigla');