Jquery memilih semua elemen yang memiliki $ jquery.data ()


Jawaban:


98

Anda bisa melakukannya

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

ini memilih semua elemen yang memiliki atribut data-myAttryang tidak sama dengan '' (jadi harus sudah disetel);

Anda juga bisa menggunakan filter ()

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

68
Atau hanya:$('[data-myAttr]')
andlrc

4
Memikirkan hal yang sama. Ini tidak bekerja seperti yang diharapkan. lihat DEMO ini
gdoron mendukung Monica

penutup 'tidak ada di bagian pertama kode (tidak dapat mengedit jawaban secara langsung)
Florent2

1
$ ('[data-myAttr! = ""]'); akan mengembalikan elemen yang belum ditetapkan. Komentar @NULL hanya mendapatkan elemen yang telah disetel.
arleslie

6
SALAH! solusi yang benar: $ ('[data-myAttr]') - lihat jawaban di bawah untuk penjelasan
BassMHL

75

Cara terbaik dan sederhana untuk memilihnya adalah:

$('[data-myAttr]')

Informasi Lebih Lanjut:

Saya menguji banyak hal.

Penggunaan $('[data-myAttr!=""]')tidak berfungsi untuk semua kasus. Karena elemen yang tidak memiliki data-myAttrhimpunan, akan data-myAttrsama dengan undefineddan $('[data-myAttr!=""]')akan memilihnya juga, yang mana tidak benar.


4
Ini hanya berfungsi dengan atribut data yang ditentukan dalam markup. Ini TIDAK berfungsi dengan atribut data yang ditentukan melalui jQuery, lihat jsfiddle.net/2p7h0Lj8/1
Sophivorus

19

Anda dapat menggunakan filter () :

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

1
Baru saja akan memposting ini, berikut biola untuk menunjukkannya bekerja: jsfiddle.net/gbHFZ/1
Rory McCrossan

1
Mengapa pemilih atribut tidak melakukan pekerjaan itu? $('[data-myAttr]')?
gdoron mendukung Monica

6
@gdoron, itu karena data()bentuk getter memang membaca data-atribut HTML5 , tetapi bentuk penyetelnya tidak membuat atau memperbaruinya.
Frédéric Hamidi

ummm, jadi di mana ini menyimpan data? dapatkah anda memberikan referensi kepada saya? Saya membaca ini "(semua nilai data kemudian disimpan secara internal di jQuery)." tetapi dimana???
gdoron mendukung Monica

3
@gdoron, data disimpan dalam cache global, dikunci oleh id yang terkait dengan elemen melalui properti perluasan.
Frédéric Hamidi


8

Anda bisa menggunakan JQuery UI dengan : data () selector

Memilih elemen yang datanya disimpan di bawah kunci yang ditentukan.

Lihat jsfiddle ini sebagai contoh

Untuk mendapatkan semua elemen yang cocok, .data('myAttr')Anda dapat menggunakan

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

Ini harus bekerja untuk elemen dengan data-atribut dan elemen dengan data yang disimpan menggunakan $.data()karena

Pada jQuery 1.4.3, atribut data HTML 5 akan secara otomatis ditarik ke objek data jQuery.

Tapi ini tidak bekerja dengan baik. Periksa jsfiddle ini dan Anda akan melihat bahwa pemilih yang kedua kali dipanggil harus cocok dengan 2 elemen dan hanya cocok dengan satu. Ini karena "bug" di pustaka jquery-ui.

Ini diambil dari file inti 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 ] );
        }
});

Seperti yang Anda lihat, mereka $.data(elem, match)malah menggunakan $(elem).data(match)yang menyebabkan cache tidak diperbarui jika Anda meminta elemen dengan data-atribut. Jika elemen telah diuji untuk data()penyimpanan, ini berfungsi dengan baik tetapi jika tidak, itu tidak akan disertakan dalam hasil yang cocok.

Ini mungkin bukan bug sama sekali jika yang Anda inginkan adalah mencocokkan hanya elemen dengan informasi data yang Anda tetapkan, tetapi jika tidak, Anda memiliki dua opsi.

  1. Jangan gunakan jquery-ui dan perluas pseudo-selector Anda sendiri $(: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. Gunakan jquery-ui dengan :datapseudoselector dan gabungkan hasil pemilihan [data-myAttr]untuk menyertakan yang mungkin dilewati

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


Ini adalah bagian dari solusi untuk masalah saya dalam memilih elemen dengan atribut data- * tanpa mengetahui id sebenarnya atau nama atribut data. Saya menemukan cara untuk memperluas jQuery untuk melakukan ini, di tempat lain, tetapi +1 di sini untuk potongan kode untuk menunjukkan aplikasi praktis. Yang lain memberi cukup petunjuk, tetapi terkadang Anda perlu MENUNJUKKAN cara MENGGUNAKAN informasi yang diberikan. Terima kasih! :)
Brandon Elliott

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

2

Pilih elemen yang telah saya atur sebelumnya jquery.data();


Pertanyaannya adalah untuk menemukan semua elemen dengan kunci tertentu dan bukan data apa pun.


Coba manfaatkan 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/


Terima kasih atas jawabannya. Pertanyaannya adalah menemukan semua elemen dengan kunci tertentu dan bukan data apa pun.
Argiropoulos Stavros

@ArgiropoulosStavros Apakah persyaratan untuk mengembalikan elemen yang memiliki html data-*set atribut, serta jQuery.data()set?
guest271314
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.