Menambahkan atribut data ke DOM

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

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

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

Saya membuat elemen dalam jquery. Setelah itu, saya ingin menambahkan atribut "data". Dia suka dan ditambahkan, tetapi di DOM, ini tidak terlihat, dan saya tidak bisa mendapatkan item, menggunakan

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

jsfiddle

Gunakan .data()metode:

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

Perhatikan bahwa ini tidak membuat data-infoatribut yang sebenarnya . Jika Anda perlu membuat atribut, gunakan .attr():

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

.data () jQuery melakukan beberapa hal tetapi tidak menambahkan data ke DOM sebagai atribut. Saat menggunakannya untuk mengambil atribut data, hal pertama yang dilakukan adalah membuat objek data jQuery dan menetapkan nilai objek ke atribut data. Setelah itu, pada dasarnya dipisahkan dari atribut data.

Contoh:

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

Jika Anda mengambil nilai atribut yang digunakan .data('foo'), itu akan mengembalikan "bar" seperti yang Anda harapkan. Jika Anda kemudian mengubah atribut menggunakan .attr('data-foo', 'blah')dan kemudian menggunakan .data('foo')untuk mengambil nilai, itu akan mengembalikan "bilah" meskipun DOM mengatakan data-foo="blah". Jika Anda menggunakan .data()untuk menetapkan nilai, itu akan mengubah nilai dalam objek jQuery tetapi tidak di DOM.

Pada dasarnya, .data()adalah untuk mengatur atau memeriksa nilai data objek jQuery. Jika Anda memeriksanya dan belum memilikinya, nilai itu dibuat berdasarkan atribut data yang ada di DOM. .attr()adalah untuk menyetel atau memeriksa nilai atribut elemen DOM dan tidak akan menyentuh nilai data jQuery. Jika Anda membutuhkan keduanya untuk berubah, Anda harus menggunakan keduanya .data()dan .attr(). Kalau tidak, tetap dengan satu atau yang lain.

di Jquery " data " tidak disegarkan secara default:

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

Anda akan menggunakan " attr " sebagai gantinya untuk pembaruan langsung:

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);

Menggunakan .data()hanya akan menambahkan data ke objek jQuery untuk elemen itu. Untuk menambahkan informasi ke elemen itu sendiri, Anda perlu mengakses elemen itu menggunakan jQuery .attratau asli.setAttribute

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

Untuk mengakses elemen dengan set atribut, Anda bisa memilih berdasarkan atribut itu seperti yang Anda catat di posting Anda ( $('div[data-info="1"]')), tetapi ketika Anda menggunakannya .data()Anda tidak bisa. Untuk memilih berdasarkan pada .data()pengaturan, Anda perlu menggunakan fungsi filter 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>

untuk mendapatkan teks dari a

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

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