[Jquery] DOM에 데이터 속성 추가하기


Answers

jQuery의 .data ()는 몇 가지 작업을 수행하지만 속성으로 DOM에 데이터를 추가하지는 않습니다. 이를 사용하여 데이터 속성을 얻는 경우, 먼저 jQuery 데이터 객체를 만들고 객체의 값을 데이터 속성에 설정합니다. 그 후에는 데이터 속성과 본질적으로 분리됩니다.

예:

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

.data('foo') 사용하여 속성의 값을 얻은 경우 예상대로 '막대'를 반환합니다. 그런 다음 .attr('data-foo', 'blah') 사용하여 속성을 변경 한 다음 .data('foo') 를 사용하여 값을 가져 오면 DOM에 data-foo="blah" 표시 되더라도 'bar'가 반환됩니다. data-foo="blah" . .data() 를 사용하여 값을 설정하면 jQuery 객체의 값은 변경되지만 DOM은 변경되지 않습니다.

기본적으로 .data() 는 jQuery 객체의 데이터 값을 설정하거나 확인하기위한 것입니다. 확인 중이며 아직이 항목이없는 경우 DOM에있는 데이터 속성을 기반으로 값을 만듭니다. .attr() 은 DOM 요소의 속성 값을 설정하거나 확인하기위한 것으로 jQuery 데이터 값을 건드리지 않습니다. 둘 다 변경해야한다면 .data().attr() 모두 사용해야합니다. 그렇지 않으면, 하나 또는 다른 막대기.

Question
$('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




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



에서 텍스트를 가져 오려면

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

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



Links