☰

データ属性を持つ要素を取得、設定、選択するにはどうすればいいですか? 質問する

tag-icon • tag-icon jquery jquery-selectors custom-data-attribute
データ属性を持つ要素を取得、設定、選択するにはどうすればいいですか? 質問する

データ属性に問題があり、何らかの理由で何も動作しないので、何か間違っているに違いありません。

セット：

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

それは何か違いを生みますか？

得る：

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

選択する：

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

どれも私には効果がありません。これは私が作り上げたものなのでしょうか、それともどうなのでしょうか?

ベストアンサー1

すべての回答は正しいですが、他の誰も言わなかったことを述べたいと思います。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メソッド経由) をゲッターとセッターとして使用する必要があります。

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

アップデート

このスレッドは数年前のものですが、ある程度のアクティビティがあるため、querySelectordom API を使用して (jQuery を必要とせずに) これを実行するのは非常に簡単であることを言及する価値があります。

document.querySelectorAll('[attribute=value]')

おすすめ記事