Thêm thuộc tính dữ liệu vào DOM

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

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

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

Tôi đang tạo ra yếu tố trong jquery. Sau đó, tôi muốn thêm "dữ liệu" thuộc tính. Anh ấy thích và được thêm vào, nhưng trong DOM, điều này không rõ ràng và tôi không thể nhận được mục này, bằng cách sử dụng

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

jsfiddle

Sử dụng .data()phương pháp:

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

Lưu ý rằng điều này không tạo ra một data-infothuộc tính thực tế . Nếu bạn cần tạo thuộc tính, sử dụng .attr():

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

.data () của jQuery thực hiện một vài điều nhưng nó không thêm dữ liệu vào DOM làm thuộc tính. Khi sử dụng nó để lấy một thuộc tính dữ liệu, điều đầu tiên nó làm là tạo một đối tượng dữ liệu jQuery và đặt giá trị của đối tượng thành thuộc tính dữ liệu. Sau đó, về cơ bản, nó được tách ra khỏi thuộc tính dữ liệu.

Thí dụ:

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

Nếu bạn lấy giá trị của thuộc tính bằng cách sử dụng .data('foo'), nó sẽ trả về "thanh" như bạn mong đợi. Nếu sau đó bạn thay đổi thuộc tính bằng cách sử dụng .attr('data-foo', 'blah')và sau đó sử dụng .data('foo')để lấy giá trị, nó sẽ trả về "thanh" mặc dù DOM nói data-foo="blah". Nếu bạn sử dụng .data()để đặt giá trị, nó sẽ thay đổi giá trị trong đối tượng jQuery nhưng không thay đổi trong DOM.

Về cơ bản, .data()là để thiết lập hoặc kiểm tra giá trị dữ liệu của đối tượng jQuery. Nếu bạn đang kiểm tra nó và nó chưa có, nó sẽ tạo ra giá trị dựa trên thuộc tính dữ liệu có trong DOM. .attr()là để thiết lập hoặc kiểm tra giá trị thuộc tính của phần tử DOM và sẽ không chạm vào giá trị dữ liệu jQuery. Nếu bạn cần cả hai để thay đổi, bạn nên sử dụng cả hai .data()và .attr(). Nếu không, hãy gắn bó với cái này hay cái khác.

trong Jquery " dữ liệu " không được làm mới theo mặc định:

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

Bạn sẽ sử dụng " attr " thay vì cập nhật trực tiếp:

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

Việc sử dụng .data()sẽ chỉ thêm dữ liệu vào đối tượng jQuery cho phần tử đó. Để thêm thông tin vào chính phần tử, bạn cần truy cập phần tử đó bằng jQuery .attrhoặc gốc.setAttribute

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

Để truy cập một phần tử với tập thuộc tính, bạn chỉ cần chọn dựa trên thuộc tính đó như bạn lưu ý trong bài đăng ( $('div[data-info="1"]')), nhưng khi bạn sử dụng, .data()bạn không thể. Để chọn dựa trên .data()cài đặt, bạn sẽ cần sử dụng chức năng lọc của 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>

để có được văn bản từ một

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

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