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

95

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

javascript jquery jquery-selectors

— Argiropoulos Stavros
quelle

98

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

— Nicola Peluchetti
quelle

67

Oder einfach:$('[data-myAttr]')

— andlrc

4

Dachte das gleiche. Es funktioniert nicht wie erwartet. siehe diese DEMO

— Gdoron unterstützt Monica

Ein Abschluss 'fehlt im ersten Code (kann die Antwort nicht direkt bearbeiten)

— Florent2

1

$ ('[data-myAttr! = ""]'); gibt Elemente zurück, denen es nicht zugewiesen wurde. Der Kommentar von @NULL erhält nur Elemente, für die er festgelegt wurde.

— Arleslie

6

FALSCH! richtige Lösung: $ ('[data-myAttr]') - Erklärung siehe unten

— BassMHL

73

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.

— Ashkan Mobayen Khiabani
quelle

3

Dies funktioniert nur mit Datenattributen, die im Markup definiert sind. Es funktioniert NICHT mit Datenattributen

— Sophivorus

19

Sie können filter () verwenden :

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

— Frédéric Hamidi
quelle

1

Wollte

— Rory McCrossan

1

Warum macht die Attributauswahl den Job nicht? $('[data-myAttr]')?

— Gdoron unterstützt Monica

6

@gdoron, das liegt daran, dass das data()Getter-Formular zwar die HTML5- data-Attribute liest, das Setter-Formular sie jedoch weder erstellt noch aktualisiert.

— Frédéric Hamidi

ähm, wo werden die Daten gespeichert? Kannst du mir eine Referenz geben? Ich habe dies gelesen "(alle Datenwerte werden dann intern in jQuery gespeichert)." aber wo???

— Gdoron unterstützt Monica

3

@gdoron, die Daten bleiben in einem globalen Cache erhalten, der durch eine ID verschlüsselt ist, die dem Element über eine expando-Eigenschaft zugeordnet ist.

— Frédéric Hamidi

17

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

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

— Roberkules
quelle

Die jQuery-Benutzeroberfläche hat dies bereits, sodass einige die anonyme Funktion möglicherweise nicht aufrufen müssen. api.jqueryui.com/data-selector

— Arleslie

7

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.

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>

Erweitern Sie das Snippet

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>

Erweitern Sie das Snippet

— devconcept
quelle

Dies war Teil der Lösung für mein Problem, Elemente mit Daten- * Attributen auszuwählen, ohne die tatsächliche ID oder den Namen der Datenattribute zu kennen. Ich habe den Weg gefunden, jQuery zu erweitern, um dies anderswo zu tun, aber +1 hier, damit das Code-Snippet die praktische Anwendung zeigt. Andere geben gerade genug Hinweise, aber manchmal müssen Sie ZEIGEN, wie die bereitgestellten Informationen verwendet werden. Vielen Dank! :)

— Brandon Elliott

7

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

— Khalid
quelle

2

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

Erweitern Sie das Snippet

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

— guest271314
quelle

Vielen Dank für die Antwort. Die Frage besteht darin, alle Elemente mit einem bestimmten Schlüssel und keine Daten zu finden.

— Argiropoulos Stavros

@ArgiropoulosStavros Müssen Elemente zurückgegeben werden, für die sowohl ein html data-*Attribut als auch ein jQuery.data()Satz festgelegt wurde?

— guest271314