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

Question 1

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

yaitu Pilih semua elemen dengan yang .data('myAttr')telah ditetapkan.

LARUTAN

Jsfiddle untuk didemostrasi adalah Fiddle

Question 2

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;
});

Question 3

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.

Question 4

Anda dapat menggunakan filter () :

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

Question 5

Anda bisa menggunakan jQuery Selector extention: Querying element data

$(':data');       // All elements with data  
$(':not(:data)'); // All elements without data

Question 6

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.

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]);
   }
});

Tampilkan cuplikan kode

 // pseudoselector code
 $.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]);
     }
 });
 // end pseudoselector

 testSelector = function() {
   var matched = $(':mydata(test)'),
     results = $('#results');
   results.append('<div>You matched ' + matched.length + ' elements</div>');
   matched.css('border', 'black 3px solid');
   console.log(matched);
   console.log('You matched ' + matched.length + ' elements');
 };

 testSelector();
 $('#addData').click(function() {
   $(".bar").data('test', 'value2');
   testSelector();
 });

 .foo {
   background-color: red;
   color: white;
 }
 .bar {
   background-color: blue;
   color: white;
 }
 #addData {
   margin-top: 20px;
 }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div>
   <span class="bar">without data attribute</span>
   <span class="foo" data-test="value1">with data attribute</span>
 </div>
 <button id="addData" type="button">Add data</button>
 <div id="results"></div>

Luaskan cuplikan

Gunakan jquery-ui dengan :datapseudoselector dan gabungkan hasil pemilihan [data-myAttr]untuk menyertakan yang mungkin dilewati

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

Tampilkan cuplikan kode

 testSelector = function() {
   var matched = $(':data(test), [data-test]'),
       results = $('#results');
   results.append('<div>You matched ' + matched.length + ' elements</div>');
   matched.css('border', 'black 3px solid');
   console.log(matched);
   console.log('You matched ' + matched.length + ' elements');
 };

 testSelector();
 $('#addData').click(function() {
   $(".bar").data('test', 'value2');
   testSelector();
 });

 .foo {
   background-color: red;
   color: white;
 }
 .bar {
   background-color: blue;
   color: white;
 }
 #addData {
   margin-top: 20px;
 }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <div>
   <span class="bar">without data attribute</span>
   <span class="foo" data-test="value1">with data attribute</span>
 </div>
 <button id="addData" type="button">Add data</button>
 <div id="results"></div>

Luaskan cuplikan

Question 7

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

Question 8

~~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>

Luaskan cuplikan

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