DOM에 데이터 속성 추가

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

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

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

jquery 내에 요소를 만들고 있습니다. 그런 다음 속성 "data"를 추가하고 싶습니다. 그는 좋아하고 추가되었지만 DOM에서는 분명하지 않으며 다음을 사용하여 항목을 가져올 수 없습니다.

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

jsfiddle

.data()방법을 사용하십시오 :

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

이것은 실제 data-info속성을 생성하지는 않습니다 . 속성을 작성해야하는 경우 다음을 사용하십시오 .attr().

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

jQuery의 .data ()는 몇 가지 작업을 수행하지만 DOM에 데이터를 속성으로 추가하지 않습니다. 이를 사용하여 데이터 속성을 가져올 때 가장 먼저하는 일은 jQuery 데이터 객체를 만들고 객체의 값을 데이터 속성으로 설정하는 것입니다. 그 후에는 본질적으로 데이터 속성에서 분리됩니다.

예:

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

을 사용하여 속성 값을 가져 .data('foo')오면 예상대로 "bar"를 반환합니다. 그런 다음 using을 사용하여 속성을 변경 .attr('data-foo', 'blah')한 다음 나중에 .data('foo')값을 가져 오기 위해 DOM을 사용하더라도 "bar"를 반환 data-foo="blah"합니다. .data()값을 설정하는 데 사용 하면 jQuery 객체의 값은 변경되지만 DOM에서는 변경되지 않습니다.

원래, .data() jQuery 객체의 데이터 값을 설정하거나 확인하기위한 것입니다. 확인 중이고 아직없는 경우 DOM에있는 데이터 속성을 기반으로 값을 작성합니다. .attr()DOM 요소의 속성 값을 설정하거나 확인하기위한 것이며 jQuery 데이터 값을 건드리지 않습니다. 당신이 그들 모두 변경해야하는 경우에는 모두 사용해야 .data()와 .attr(). 그렇지 않으면, 하나 또는 다른 것을 고수하십시오.

Jquery에서 " data "는 기본적으로 새로 고침되지 않습니다.

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