jqueryは$ jquery.data()を持つすべての要素を選択します


回答:


98

あなたができる

$('[data-myAttr!=""]'); 

これは、data-myAttr''と等しくない属性を持つすべての要素を選択します(したがって、設定されている必要があります)。

filter()を使用することもできます

$('*').filter(function() {
    return $(this).data('myAttr') !== undefined;
});

67
または、次のようにします$('[data-myAttr]')
。– andlrc

4
同じことを考えた。期待どおりに動作しません。このデモを参照してください
gdoronはモニカをサポートしています

コードの最初の部分に終了 'がありません(回答を直接編集できません)
Florent2

1
$( '[data-myAttr!= ""]'); 割り当てられていない要素を返します。@NULLのコメントは、それが設定されている要素のみを取得します。
arleslie 2014年

6
違う!正しい解決策:$( '[data-myAttr]')-説明については、以下の回答を参照してください
BassMHL

74

それらを選択する最良かつ簡単な方法は次のとおりです。

$('[data-myAttr]')

詳しくは:

多くのことをテストしました。

を使用$('[data-myAttr!=""]')しても、すべてのケースで機能するわけではありません。data-myAttrセットを持たない要素はとdata-myAttr等しくなりundefined$('[data-myAttr!=""]')それらも選択するため、これは誤りです。


3
これは、マークアップで定義されたデータ属性でのみ機能します。jQueryを介して定義されたデータ属性では機能しません。jsfiddle.net
2p7h0Lj8 / 1を

19

filter()を使用できます:

var elements = $("*").filter(function() {
    return $(this).data("myAttr") !== undefined;
});

1
これを投稿しようとしていましたが、動作することを示すためのフィドルです:jsfiddle.net/gbHFZ/1
Rory McCrossan

1
なぜ属性セレクターは仕事をしないのですか?$('[data-myAttr]')
gdoronがモニカをサポートしている

6
@gdoron、それはdata()'のゲッターフォームが実際にHTML5 data-属性を読み取るが、そのセッターフォームはそれらを作成も更新もしないためです。
フレデリックハミディ

うーん、データはどこに保存されますか?私にリファレンスを教えてもらえますか?私はこれを読みます(すべてのデータ値はjQueryに内部的に格納されます)。しかしここで???
gdoronがモニカをサポートしている

3
@gdoronの場合、データは、expandoプロパティを通じて要素に関連付けられているIDをキーとして、グローバルキャッシュに保持されます。
フレデリックハミディ


7

JQuery UIを :data()セレクターで

指定されたキーの下にデータが格納されている要素を選択します。

このjsfiddleを確認してくださいの例を

.data('myAttr')あなたが使用できる一致するすべての要素を取得するには

var matches = $(':data(myAttr)');

これは、data-属性を持つ要素とデータを格納する要素の両方で機能するはず$.data()です。

jQuery 1.4.3以降、HTML 5のdata-属性はjQueryのデータオブジェクトに自動的に取り込まれます。

しかし、これはあまりうまくいきません。このjsfiddleを確認してくださいをすると、セレクターが2回呼び出されたときに、2つの要素に一致し、1つだけに一致していることがわかります。これは、jquery-uiライブラリの「バグ」が原因です。

これはコアjquery-uiファイルから取得されます。

 $.extend( $.expr[ ":" ], {
    data: $.expr.createPseudo ?
        $.expr.createPseudo(function( dataName ) {
            return function( elem ) {
                return !!$.data( elem, dataName );
            };
        }) :
        // support: jQuery <1.8
        function( elem, i, match ) {
            return !!$.data( elem, match[ 3 ] );
        }
});

ご覧のとおり、$.data(elem, match)代わり$(elem).data(match)に使用しているため、data-属性を持つ要素をリクエストしている場合にキャッシュが更新されません。要素のdata()保存がテストされている場合、これは適切に機能しますが、そうでない場合、結果の一致には含まれません。

要素だけを自分で設定したデータ情報と照合したいのであれば、これはまったくバグではないかもしれませんが、そうでなければ、2つのオプションが残されます。

  1. jquery-uiを使用せず、独自の疑似セレクターを拡張する $(:mydata(myAttr))

    $.extend($.expr[":"], {
       mydata: $.expr.createPseudo ?
       $.expr.createPseudo(function(dataName) {
          return function(elem) {
             return !!$(elem).data(dataName);
          };
       }) : function(elem, i, match) {
           return !!$(elem).data(match[3]);
       }
    });

  2. :data疑似セレクターでjquery-uiを使用し、選択の結果を結合して、[data-myAttr]スキップされる可能性があるものを含めます

    var matches = $(':data(myAttr)', '[data-myAttr]')


これは、実際のIDまたはデータ属性名を知らずにdata- *属性を持つ要素を選択するという私の問題の解決策の一部でした。他の場所でこれを行うためにjQueryを拡張する方法を見つけましたが、実用的なアプリケーションを示すコードスニペットをここで+1しました。他の人はヒントを与えるだけで十分ですが、提供された情報の使用方法を表示する必要がある場合もあります。ありがとう!:)
ブランドン・エリオット

7
$('[data-myAttr]').each(function() {
       var element = $(this);
       // Do something with the element
});

2

以前に設定した要素を選択 jquery.data();


問題は、データではなく、特定のキーを持つすべての要素を見つけることです。


活用してみる jQuery.data()

$(".myClass").each(function(i){
    if( i % 2 == 0 ){
        $(this).data("myAttr",i + 1);                
    }
});
    
var res = $(".myClass").map(function(i) {
    console.log($(this).data("myAttr"));
    return $.data(this, "myAttr") !== undefined ? this : null
});    

console.log(res);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="myClass">1</div>
<div class="myClass">2</div>
<div class="myClass">3</div>
<div class="myClass">4</div>
<div class="myClass">5</div>

jsfiddle http://jsfiddle.net/xynZA/142/


回答ありがとうございます。質問は、データではなく、特定のキーを持つすべての要素を見つけるためのものです。
Argiropoulos Stavros

@ArgiropoulosStavros html data-*setだけでなく、属性セットを持つ要素を返す必要がありますjQuery.data()か?
guest271314
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.