25

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

設定：

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

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

得る：

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

選択する：

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

これはどれもうまくいきません。私はこれを作っていますか、それともどうですか?

4

4 に答える 4

55

すべての答えは正しいですが、他の誰もしなかったことを述べたいと思います。
jQuerydataメソッドは、html5 データ属性の getter のように機能しますが、setter は 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';
});

したがって、これらの問題を克服するには、(jQuery のメソッドを介してattr) html5 データセット属性を getter および setter として 使用する必要があります。

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

または、jQuery internal をフィルタリングするカスタム式を使用できます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)')

アップデート

このスレッドが数年前のものであることは知っていますが、いくつかのアクティビティがあるため、querySelectordom API (jQuery を必要としない) を使用してこれを行うのは非常に簡単であることに言及する価値があります。

document.querySelectorAll('[attribute=value]')
于 2012-11-07T18:46:31.603 に答える
9

使用できる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
于 2012-11-07T18:31:53.537 に答える
5 
// Set
$('#element').attr('data-value', 'value');
// Get
var value = $('#element').attr('data-value');
// Select
var elem = $('#element[data-value = "' +value+ '"]');
于 2012-11-07T18:34:14.433 に答える
1

ID セレクターを使用しているため、属性セレクターを使用する必要はありません。データはプロパティであり、data( attr メソッドではなく) メソッドを使用して設定しているため、属性セレクターを使用して要素を選択することはできません。次の方法をdata1 === 1使用できます。filter

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

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

于 2012-11-07T18:29:53.243 に答える