DOM'a veri özelliği ekleme

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

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

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

Jquery içinde eleman yaratıyorum. Bundan sonra, "data" niteliğini eklemek istiyorum. Beğendi ve eklendi, ancak DOM'da bu belirgin değil ve öğeyi alamıyorum.

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

jsfiddle

.data()Yöntemi kullanın :

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

Bunun gerçek bir data-infoözellik oluşturmadığını unutmayın . Özelliği oluşturmanız gerekirse, şunu kullanın .attr():

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

jQuery's .data () birkaç şey yapar, ancak verileri DOM olarak bir öznitelik olarak eklemez. Bir veri özniteliğini kapmak için kullanırken, yaptığı ilk şey bir jQuery veri nesnesi oluşturmak ve nesnenin değerini veri özniteliğine ayarlamaktır. Bundan sonra, temel olarak veri özelliğinden ayrılır.

Misal:

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

Özniteliğin değerini kullanarak yakaladıysanız, .data('foo')beklediğiniz gibi "bar" döndürür. Sonra özniteliği kullanarak .attr('data-foo', 'blah')ve sonra .data('foo')değeri kapmak için kullanın , DOM diyor olsa bile "bar" dönecektir data-foo="blah". .data()Değeri ayarlamak için kullanırsanız , jQuery nesnesindeki değeri değiştirir, ancak DOM'daki değeri değiştirmez.

Temel olarak, .data()jQuery nesnesinin veri değerini ayarlamak veya kontrol etmek içindir. Bunu kontrol ediyorsanız ve zaten bir tane yoksa, DOM'daki veri özelliğine göre değeri oluşturur. .attr()DOM öğesinin özellik değerini ayarlamak veya kontrol etmek içindir ve jQuery veri değerine dokunmaz. Onları hem değiştirmeniz gerekirse hem kullanmalısınız .data()ve .attr(). Aksi takdirde, biriyle veya diğeriyle yapışır.

Jquery " data " da varsayılan olarak yenilenmez:

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

Bunun yerine canlı güncelleme için " attr " kullanırsınız:

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

Kullanıldığında .data(), yalnızca o öğenin jQuery nesnesine veri eklenir. Öğenin kendisine bilgi eklemek için jQuery .attrveya native'i kullanarak o öğeye erişmeniz gerekir.setAttribute

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

Amacıyla erişmek nitelik seti ile bir öğe, sadece yayınınızda (içinde not olarak bu özelliğe bağlı olarak seçin olabilir $('div[data-info="1"]')), ancak kullandığınızda .data()bunu yapamazsınız. .data()Ayara bağlı olarak seçim yapmak için jQuery'nin filtre işlevini kullanmanız gerekir.

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>

metni almak için

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

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