Jquery wählt alle Elemente aus, die $ jquery.data () haben.

Wählen Sie Elemente aus, mit denen ich zuvor festgelegt habe jquery.data();

dh Wählen Sie alle Elemente aus, die .data('myAttr')bereits festgelegt wurden.

LÖSUNG

Eine jsfiddle zum Demostrieren ist Fiddle

Du könntest es tun

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

Dadurch werden alle Elemente ausgewählt, deren Attribut data-myAttrungleich '' ist (es muss also festgelegt worden sein).

Sie können auch filter () verwenden

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

Der beste und einfachste Weg, sie auszuwählen, ist:

$('[data-myAttr]')

Mehr Informationen:

Ich habe viele Dinge getestet.

Die Verwendung $('[data-myAttr!=""]')funktioniert nicht in allen Fällen. Weil Elemente, die keine data-myAttrMenge haben, data-myAttrgleich undefinedund sind$('[data-myAttr!=""]') auch diese auswählen, was falsch ist.

Sie können filter () verwenden :

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

Sie können diese jQuery Selector-Erweiterung verwenden: Abfragen von Elementdaten

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

Sie können die JQuery-Benutzeroberfläche mit dem Selektor: data () verwenden

Wählt Elemente aus, deren Daten unter dem angegebenen Schlüssel gespeichert sind.

Überprüfen Sie diese jsfiddle für ein Beispiel

Um alle passenden Elemente zu erhalten .data('myAttr'), können Sie verwenden

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

Dies sollte sowohl für Elemente mit data-Attributen als auch für Elemente mit Daten funktionieren, die mit $.data()weil gespeichert wurden

Ab jQuery 1.4.3 werden HTML 5-Datenattribute automatisch in das Datenobjekt von jQuery gezogen.

Das funktioniert aber nicht sehr gut. Überprüfen Sie diese jsfiddle und Sie werden sehen, dass der Selektor beim zweiten Aufruf mit 2 Elementen übereinstimmen sollte und nur mit einem übereinstimmt. Dies liegt an einem "Fehler" in der jquery-ui-Bibliothek.

Dies wird aus der Kerndatei jquery-ui übernommen.

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

Wie Sie sehen, werden sie $.data(elem, match)stattdessen verwendet $(elem).data(match), wodurch der Cache nicht aktualisiert wird, wenn Sie Elemente mit data-Attributen anfordern . Wenn das Element getestet wurdedata() Speicherung funktioniert dies gut, aber wenn nicht, wird es nicht in die resultierenden Übereinstimmungen aufgenommen.

Dies ist möglicherweise überhaupt kein Fehler, wenn Sie nur Elemente mit den von Ihnen festgelegten Dateninformationen abgleichen möchten. Andernfalls stehen Ihnen zwei Optionen zur Verfügung.

1. Verwenden Sie nicht jquery-ui und erweitern Sie Ihren eigenen 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]);
      }
   });

   Code-Snippet anzeigen

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

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

2. Verwenden Sie jquery-ui mit dem :dataPseudoselector und fügen Sie die Ergebnisse der Auswahl hinzu [data-myAttr], um diejenigen einzuschließen , die möglicherweise übersprungen werden

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

   Code-Snippet anzeigen

    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>
   
    

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

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

Wählen Sie Elemente aus, mit denen ich zuvor festgelegt habe jquery.data();

Die Frage ist, alle Elemente mit einem bestimmten Schlüssel und keine Daten zu finden.

Versuchen Sie es mit 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/