Jquery wybiera wszystkie elementy, które mają $ jquery.data ()

Question 1

Wybierz elementy, które wcześniej ustawiłem jquery.data();

tzn. Wybierz wszystkie elementy, .data('myAttr')które zostały już ustawione.

ROZWIĄZANIE

Jsfiddle do zaprezentowania to Fiddle

Question 2

Mógłbyś

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

to zaznacza wszystkie elementy, które mają atrybut data-myAttrróżny od „” (więc musi być ustawiony);

możesz też użyć filter ()

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

Question 3

Najlepszym i najprostszym sposobem ich wybrania jest:

$('[data-myAttr]')

Więcej informacji:

Przetestowałem wiele rzeczy.

Używanie $('[data-myAttr!=""]')nie działa we wszystkich przypadkach. Bo elementy, które nie mają data-myAttrzbioru, będą miały swoje data-myAttrrówne undefinedi $('[data-myAttr!=""]')te też będą wybierać, co jest niepoprawne.

Question 4

Możesz użyć filtra () :

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

Question 5

Możesz użyć tego rozszerzenia jQuery Selector: Zapytanie o dane elementu

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

Question 6

Możesz użyć interfejsu użytkownika JQuery z selektorem: data ()

Wybiera elementy, które mają dane przechowywane pod określonym kluczem.

Sprawdź na przykład ten plik jsfiddle

Aby dopasować wszystkie elementy .data('myAttr'), możesz użyć

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

Powinno to działać zarówno w przypadku elementów z data-atrybutami, jak i elementów z danymi przechowywanymi przy użyciu funkcji $.data()ponieważ

Od wersji jQuery 1.4.3 atrybuty danych HTML 5 będą automatycznie pobierane do obiektu danych jQuery.

Ale to nie działa zbyt dobrze. Sprawdź to jsfiddle, a zobaczysz, że przy drugim wywołaniu selektora powinien on pasować do 2 elementów i pasuje tylko do jednego. Jest to spowodowane "błędem" w bibliotece jquery-ui.

Jest to pobierane z podstawowego pliku 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 ] );
        }
});

Jak widać, używają $.data(elem, match)zamiast tego, $(elem).data(match)co powoduje, że pamięć podręczna nie jest aktualizowana w przypadku, gdy żądasz elementów z data-atrybutami. Jeśli element został przetestowany pod kątem data()przechowywania, działa to dobrze, ale jeśli nie, nie zostanie uwzględniony w wynikowych dopasowaniach.

Może to wcale nie być błąd, jeśli chcesz dopasować tylko elementy do informacji o danych ustawionych przez Ciebie, ale jeśli nie, masz dwie opcje.

Nie używaj jquery-ui i rozszerzaj swój własny pseudo-selektor $(: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]);
   }
});

Pokaż fragment kodu

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

Rozwiń fragment

Użyj jquery-ui z :datapseudoselektorem i połącz wyniki wyboru, [data-myAttr]aby uwzględnić te, które mogą zostać pominięte

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

Pokaż fragment kodu

 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>

Rozwiń fragment

Question 7

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

Question 8

~~Wybierz elementy, które wcześniej ustawiłem jquery.data();~~

Pytanie dotyczy znalezienia wszystkich elementów z określonym kluczem, a nie żadnych danych.

Spróbuj wykorzystać 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>

Rozwiń fragment

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