データ属性による要素の選択

data属性に基づいて要素を選択する簡単で簡単な方法はありますか？たとえば、というcustomerID値を持つ名前が付けられたデータ属性を持つすべてのアンカーを選択します22。

私はrelそのような情報を格納するために使用したり他の属性を使用したりするのをためらっていますが、格納されているデータに基づいて要素を選択するのははるかに困難です。

$('*[data-customerID="22"]');

を省略できるはずです*が、私が正しく思い出せば、使用しているjQueryのバージョンによっては、誤った結果になる可能性があります。

Selectors API（document.querySelector{,all}）との互換性のため、この場合、属性値（22）を囲む引用符は省略できない場合があります。

また、jQueryスクリプトでデータ属性を頻繁に使用する場合は、HTML5カスタムデータ属性プラグインの使用を検討してください。これにより、を使用してさらに読みやすいコードを記述でき.dataAttr('foo')、縮小後のファイルサイズが小さくなります（を使用した場合と比較して.attr('data-foo')）。

Googlingを使用していて、データ属性を使用した選択に関するより一般的なルールが必要な場合：

$("[data-test]")（属性の値に関係なく）data属性のみを持つ要素を選択します。含む：

<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>

$('[data-test~="foo"]')次のように、data属性が含まれ fooているが正確である必要のない要素を選択します。

<div data-test="foo">Exact Matches</div>
<div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>

$('[data-test="the_exact_value"]')データ属性の正確な値がである要素を選択します。the_exact_value次に例を示します。

<div data-test="the_exact_value">Exact Matches</div>

だがしかし

<div data-test="the_exact_value foo">This won't match</div>

を使用$('[data-whatever="myvalue"]')すると、html属性を持つものがすべて選択されますが、新しいjQueriesでは$(...).data(...)、データを添付するために使用する場合、何らかの魔法のブラウザを使用し、htmlには影響しないため.find、前の回答で示されているようにによって検出されません。

検証（1.7.2以降でテスト済み）（フィドルも参照）：（ より完全になるように更新）

var $container = $('<div><div id="item1"/><div id="item2"/></div>');

// add html attribute
var $item1 = $('#item1').attr('data-generated', true);

// add as data
var $item2 = $('#item2').data('generated', true);

// create item, add data attribute via jquery
var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);

// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');

jQueryなしでJavaScriptの答えを見たことはありません。うまくいけば、それは誰かを助けます。

var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!';

<a data-customerID='22'>test</a>

情報：

• データ属性

• .querySelectorAll（）;

data属性を持つすべてのアンカーを選択するにdata-customerID==22は、aを含めて、検索の範囲をその要素タイプのみに制限する必要があります。ページに多くの要素がある場合、大きなループで、または高い頻度でデータ属性検索を実行すると、パフォーマンスの問題が発生する可能性があります。

$('a[data-customerID="22"]');

ネイティブJSの例

要素のNodeListを取得する

var elem = document.querySelectorAll('[data-id="container"]')

html： <div data-id="container"></div>

最初の要素を取得する

var firstElem = document.querySelector('[id="container"]')

html： <div id="container"></div>

ノードリストを返すノードのコレクションをターゲットにします

document.getElementById('footer').querySelectorAll('[data-id]')

html：

<div class="footer">
    <div data-id="12"></div>
    <div data-id="22"></div>
</div>

複数の（OR）データ値に基づいて要素を取得する

document.querySelectorAll('[data-section="12"],[data-selection="20"]')

html：

<div data-selection="20"></div>
<div data-section="12"></div>

結合された（AND）データ値に基づいて要素を取得する

document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')

html：

<div data-prop1="12" data-prop2="20"></div>

値が始まるアイテムを取得する

document.querySelectorAll('[href^="https://"]')

Jquery filter（）メソッドを使用：

http://jsfiddle.net/9n4e1agn/1/

HTML：

<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>

JavaScript：

$(function() {    
    $('button').filter(function(){
        return $(this).data("id")   == 2}).css({background:'red'});  
     });

このような構成：Safari 8.0$('[data-XXX=111]')では機能しません。

このようにデータ属性$('div').data('XXX', 111)を設定すると、次のようにDOMで直接データ属性を設定した場合にのみ機能します。$('div').attr('data-XXX', 111)。

それは、jQueryチームがガベージコレクターを最適化して、各データ変更属性でのDOM再構築でのメモリリークと重い操作を防ぐためだと思います。

これはChromeで動作するために値がなければなりません別のペアの引用符があっては。

たとえば、次のようにのみ機能します。

$('a[data-customerID=22]');

要素にプログラムで（dom属性ではなく）データ項目がアタッチされているかどうかに基づいて要素をフィルター処理することが望ましい場合があります。

$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();

上記は機能しますが、あまり読みやすくありません。より良いアプローチは、この種のものをテストするために疑似セレクターを使用することです：

$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
    return function (domEl) {
        var $el = $(domEl);
        return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
    };
});

これで、元のステートメントをより流暢で読みやすいものにリファクタリングできます。

$el.filter(":hasData('foo-bar')").doSomething();

「生きている標準」のいくつかの機能を使用してすべての回答を完了するために-現在（html5-時代）、サードパーティのライブラリなしでそれを行うことが可能です：

• querySelectorを使用した純粋/プレーンJS（CSSセレクターを使用）：
  • DOMの最初を選択します。 document.querySelector('[data-answer="42"],[type="submit"]')
  • DOM内のすべてを選択： document.querySelectorAll('[data-answer="42"],[type="submit"]')
• 純粋/プレーンCSS
  • 特定のタグ： [data-answer="42"],[type="submit"]
  • 特定の属性を持つすべてのタグ：[data-answer]またはinput[type]