Jquery, $ jquery.data () içeren tüm öğeleri seçer

Question 1

Daha önce ayarladığım öğeleri seçin jquery.data();

yani, .data('myAttr')önceden ayarlanmış tüm öğeleri seçin .

ÇÖZÜM

Gösterilmesi gereken bir jsfiddle, Fiddle

Question 2

Yapabilirsin

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

bu data-myAttr, '' değerine eşit olmayan bir niteliğe sahip tüm öğeleri seçer (bu nedenle ayarlanmış olması gerekir);

ayrıca filter () kullanabilirsiniz

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

Question 3

Bunları seçmenin en iyi ve basit yolu:

$('[data-myAttr]')

Daha fazla bilgi:

Bir çok şeyi test ettim.

Kullanmak $('[data-myAttr!=""]')her durumda çalışmaz. Çünkü data-myAttrseti olmayan elemanlar data-myAttreşit olacak undefinedve bunları $('[data-myAttr!=""]')da seçecek, ki bu yanlış.

Question 4

Filter () kullanabilirsiniz :

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

Question 5

Bu jQuery Selector uzantısını kullanabilirsiniz: Öğe verilerini sorgulama

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

Question 6

JQuery kullanıcı arayüzünü şu şekilde kullanabilirsiniz : data () seçici

Belirtilen anahtar altında depolanan verilere sahip öğeleri seçer.

Kontrol bu jsfiddle bir örnek için

Eşleşen tüm öğeleri elde etmek için .data('myAttr')kullanabilirsiniz

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

Bu, hem data-özniteliklere sahip öğeler hem de veriler kullanılarak depolanan öğeler için çalışmalıdır $.data()çünkü

JQuery 1.4.3'ten itibaren HTML 5 veri öznitelikleri otomatik olarak jQuery'nin veri nesnesine çekilecektir.

Ama bu pek iyi çalışmıyor. Bu jsfiddle'ı kontrol edin ve seçicinin ikinci çağrıldığında 2 öğeyle eşleştiğini ve yalnızca biriyle eşleştiğini göreceksiniz. Bunun nedeni jquery-ui kitaplığındaki "bir hata" dır.

Bu, çekirdek jquery-ui dosyasından alınır.

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

Gördüğünüz gibi, $.data(elem, match)bunun yerine kullanıyorlar, $(elem).data(match)bu da data-özniteliklere sahip öğeler talep etmeniz durumunda önbelleğin güncellenmemesine neden oluyor . Öğe data()depolama için test edilmişse, bu iyi çalışır, ancak değilse, sonuçtaki eşleşmelere dahil edilmeyecektir.

İstediğiniz şey yalnızca sizin tarafınızdan belirlenen veri bilgileriyle eşleştirmekse, ancak iki seçeneğiniz kalmadıysa bu bir hata olmayabilir.

Jquery-ui kullanmayın ve kendi sözde seçicinizi genişletmeyin $(: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]);
   }
});

Kod parçacığını göster

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

Snippet'i genişlet

:dataSözde seçici ile jquery-ui kullanın ve [data-myAttr]atlanabilecek olanları dahil etmek için seçim sonuçlarını birleştirin

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

Kod parçacığını göster

 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>

Snippet'i genişlet

Question 7

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

Question 8

~~Daha önce ayarladığım öğeleri seçin jquery.data();~~

Soru, herhangi bir veriye değil, belirli bir anahtara sahip tüm öğeleri bulmak içindir.

Kullanmayı deneyin 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>

Snippet'i genişlet

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