1137

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

私はrelそのような情報を保存するために他の属性を使用することをためらっていますが、保存されているデータに基づいて要素を選択するのははるかに難しいと感じています.

4

11 に答える 11

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

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

Selectors API ( ) との互換性のために、この場合、属性値 ( )をdocument.querySelector{,all}囲む引用符を省略できないことに注意してください。22

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

于 2010-03-21T16:14:45.657 に答える
395

グーグルで、データ属性での選択に関するより一般的なルールが必要な場合：

$("[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"]')data 属性の正確な値が である任意の要素を選択しますthe_exact_value。次に例を示します。

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

だがしかし

<div data-test="the_exact_value foo">This won't match</div>
于 2015-03-07T20:03:37.543 に答える
147

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

Verify (1.7.2+ でテスト済み) ( fiddleも参照): (より完全になるように更新)

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"]');
于 2012-07-26T15:57:58.607 に答える
106

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

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

elements[0].innerHTML = 'it worked!';
<a data-customerID='22'>test</a>

情報：

于 2015-12-29T14:44:43.957 に答える
73

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

$('a[data-customerID="22"]');
于 2013-09-23T16:53:04.427 に答える
46

ネイティブ 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://"]')
于 2016-11-15T07:53:59.290 に答える
17

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

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

これは、jQuery チームがガベージ コレクターを最適化して、データ属性の変更ごとにメモリ リークや DOM 再構築の負荷の高い操作を防止したためだと思います。

于 2014-10-27T09:13:52.780 に答える
13

これが Chrome で機能するには、値に別の引用符のペアが含まれていてはなりません。

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

$('a[data-customerID=22]');
于 2014-12-28T15:48:30.397 に答える
7

プログラムでデータ項目がアタッチされているかどうかに基づいて要素をフィルタリングすることが望ましい場合があります(dom-attributes 経由ではありません)。

$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();
于 2016-12-09T13:01:31.903 に答える