DOM에 데이터 속성 추가

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

jfiddle

사용.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"를 반환합니다.다음을 사용하여 속성을 변경하는 경우.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());

사용..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>

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

언급URL : https://stackoverflow.com/questions/14935191/adding-data-attribute-to-dom