web-dev-qa-db-ja.com

データ属性を持つ要素を取得、設定、選択する方法は？

データ属性に問題があります。何らかの理由で機能するものが何もないので、何か間違ったことをしなければなりません。

セットする：

$('#element').data('data1', '1'); //Actually in my case the data is been added manually

それは違いがありますか？

取得する：

$('#element').data('data1');

選択する：

$('#element[data1 = 1]')

これは私にはうまくいきません。私はこれを作り上げていますか、それともどうですか？

jqueryjquery-selectorscustom-data-attribute
25
Thaiscorpion

すべての答えは正しいですが、私は他の誰もしなかったことを述べたいと思います。
jQuery dataメソッドは、html5データ属性のゲッターのように機能しますが、セッターはdata- *属性を変更しません。
したがって、手動でデータを追加した場合（コメントに記載されているとおり）、css属性セレクターを使用して要素を選択できます。

$('#element[data-data1=1]')

ただし、jQueryを介してデータを追加（変更）した場合、上記のソリューションは機能しません。
この失敗の例を次に示します。

var div = $('<div />').data('key','value');
alert(div.data('key') == div.attr('data-key'));// it will be false

そのため、回避策は、jQueryデータ値をチェックして目的の値と一致するようにコレクションをフィルタリングすることです。

// replace key & value with own strings
$('selector').filter(function(i, el){
    return $(this).data('key') == 'value';
});

したがって、これらの問題を解決するには、html5データセット属性を（jQueryのattr methosを介して）ゲッターおよびセッターとして使用する必要があります。

$('selector').attr('data-' + key, value);

または、jQuery内部dataをフィルタリングするカスタム式を使用できます。

$.expr[':'].data = function(elem, index, m) {
    // Remove ":data(" and the trailing ")" from the match, as these parts aren't needed:
    m[0] = m[0].replace(/:data\(|\)$/g, '');
    var regex = new RegExp('([\'"]?)((?:\\\\\\1|.)+?)\\1(,|$)', 'g'),
    // Retrieve data key:
    key = regex.exec( m[0] )[2],
    // Retrieve data value to test against:
    val = regex.exec( m[0] );
    if (val) {
        val = val[2];
    }
    // If a value was passed then we test for it, otherwise we test that the value evaluates to true:
    return val ? $(elem).data(key) == val : !!$(elem).data(key);
};

そしてそれを次のように使用します：

$('selector:data(key,value)')
54
gion_13

属性の値をすぐにDOMに反映するには、.attr()を使用できます

$('#element').attr('data-data1', '1');  // Sets the attribute

$('#element[data-data1="1"]') // Selects the element with data-data1 attribute'

$('#element').data('data1'); // Gets the value  of the attribute

$('#element').attr('data-data1'); // Gets the value  of the attribute

プレーンなJavascriptでは、これを試すことができます

var elem = document.getElementById('element');

elem.setAttribute('data-data1', '1'); // Set the attribute

elem.getAttribute('data-data1'); // Gets the attribute
8
Sushanth --
// Set
$('#element').attr('data-value', 'value');
// Get
var value = $('#element').attr('data-value');
// Select
var elem = $('#element[data-value = "' +value+ '"]');
5
micadelli

IDセレクターを使用しているため、属性セレクターを使用する必要はありません。データはプロパティであり、dataメソッドを使用して設定しているため（attrメソッドではない）、要素を選択できません属性セレクターを使用して、data1 === 1がある場合にのみ要素を選択する場合は、filterメソッドを使用できます。

(function($){
    $(function(){
       // ...
       $('#element').filter(function() {
          return this.dataset.data1 == 1
          // return $(this).data('data1') == 1
       })
    })
})(jQuery);

dataset：読み取りモードと書き込みモードの両方で、要素に設定されたすべてのカスタムデータ属性（data- *）へのアクセスを許可します。これは、DOMStringのマップで、カスタムデータ属性ごとに1つのエントリがあります。

1
undefined