web-dev-qa-db-ja.com

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

jqueryhtml5custom-data-attribute
143
Luntegg

.data()メソッドを使用してください。

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

これは実際のdata-info属性を作成しないことに注意してください。属性を作成する必要がある場合は.attr()を使用してください。

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

jQueryの.data（）はいくつかのことを行いますが、属性としてデータをDOMに追加しません。これを使ってデータ属性を取得する場合、最初に行うことはjQueryデータオブジェクトを作成し、そのオブジェクトの値をデータ属性に設定することです。その後は、本質的にデータ属性から切り離されています。

例：

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

.data('foo')を使用して属性の値を取得した場合は、期待どおりに "bar"が返されます。その後、.attr('data-foo', 'blah')を使用して属性を変更し、後で.data('foo')を使用して値を取得すると、DOMがdata-foo="blah"と言っていても "bar"を返します。 .data()を使用して値を設定すると、jQueryオブジェクトの値は変更されますがDOMの値は変更されません。

基本的に、.data()はjQueryオブジェクトのデータ値を設定または確認するためのものです。チェックしていて、まだ持っていない場合は、DOMにあるdata属性に基づいて値を作成します。 .attr()は、DOM要素の属性値を設定または確認するためのもので、jQueryデータ値には影響しません。両方を変更する必要がある場合は、.data()と.attr()の両方を使用する必要があります。それ以外の場合は、どちらか一方に固執します。

26
Brendon Shih

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());
13
diego matos - keke
 $(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);
4
DrMabuse

.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>
3
Travis J

からテキストを取得する

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

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