Jquery seleziona tutti gli elementi che hanno $ jquery.data ()

96

Seleziona gli elementi che ho impostato in precedenza jquery.data();

cioè selezionare tutti gli elementi .data('myAttr')già impostati.

SOLUZIONE

Un jsfiddle da dimostrare è Fiddle

javascript jquery jquery-selectors

— Argiropoulos Stavros
fonte

98

Potresti fare

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

questo seleziona tutti gli elementi che hanno un attributo data-myAttrche non è uguale a "" (quindi deve essere stato impostato);

potresti anche usare filter ()

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

— Nicola Peluchetti
fonte

67

O semplicemente:$('[data-myAttr]')

— andlrc

4

Ho pensato la stessa cosa. Non funziona come previsto. guarda questa DEMO

— gdoron supporta Monica il

una chiusura 'manca nel primo pezzo di codice (non è possibile modificare la risposta direttamente)

— Florent2

1

$ ('[data-myAttr! = ""]'); restituirà elementi a cui non è stato assegnato. Il commento di @NULL ottiene solo gli elementi che lo hanno impostato.

— arleslie

6

SBAGLIATO! soluzione corretta: $ ('[data-myAttr]') - vedere la risposta di seguito per la spiegazione

— BassMHL

74

Il modo migliore e semplice per selezionarli è:

$('[data-myAttr]')

Maggiori informazioni:

Ho provato molte cose.

L'uso $('[data-myAttr!=""]')non funziona per tutti i casi. Perché gli elementi che non hanno un data-myAttrset avranno il loro data-myAttruguale undefinede $('[data-myAttr!=""]')selezioneranno anche quelli, il che non è corretto.

— Ashkan Mobayen Khiabani
fonte

3

Funziona solo con gli attributi dei dati definiti nel markup. NON funziona con gli attributi dei dati definiti tramite jQuery, vedere jsfiddle.net/2p7h0Lj8/1

— Sophivorus

19

Puoi usare filter () :

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

— Frédéric Hamidi
fonte

1

Stavo

— Rory McCrossan,

1

Perché il selettore di attributi non fa il lavoro? $('[data-myAttr]')?

— gdoron supporta Monica il

6

@gdoron, questo perché data()il modulo getter di effettivamente legge gli data-attributi HTML5 , ma il suo modulo setter non li crea né li aggiorna.

— Frédéric Hamidi

ummm, quindi dove salva i dati? puoi darmi un riferimento? Ho letto questo "(tutti i valori dei dati vengono quindi memorizzati internamente in jQuery)." ma dove???

— gdoron supporterà Monica il

3

@gdoron, i dati vengono conservati in una cache globale, codificati da un id associato all'elemento tramite una proprietà expando.

— Frédéric Hamidi

17

È possibile utilizzare questa estensione jQuery Selector: query sui dati dell'elemento

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

— roberkules
fonte

jQuery UI ha già questo, quindi alcuni potrebbero non aver bisogno di chiamare la funzione anonima. api.jqueryui.com/data-selector

— arleslie

7

Puoi utilizzare l'interfaccia utente di JQuery con il selettore: data ()

Seleziona gli elementi che hanno dati archiviati nella chiave specificata.

Controlla questo jsfiddle per un esempio

Per ottenere tutti gli elementi corrispondenti .data('myAttr')puoi utilizzare

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

Questo dovrebbe funzionare sia per gli elementi con data-attributi che per gli elementi con dati memorizzati utilizzando $.data()because

A partire da jQuery 1.4.3 gli attributi di dati HTML 5 verranno automaticamente inseriti nell'oggetto dati di jQuery.

Ma questo non funziona molto bene. Controlla questo jsfiddle e vedrai che la seconda volta che viene chiamato il selettore dovrebbe corrispondere a 2 elementi e ne corrisponde solo uno. Ciò è dovuto a "un bug" nella libreria jquery-ui.

Questo è preso dal file jquery-ui principale.

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

Come si può vedere che stanno utilizzando $.data(elem, match), invece $(elem).data(match), che fa sì che la cache non essere aggiornato nel caso in cui si richiede elementi con data-attributi. Se l'elemento è stato testato per l' data()archiviazione, funziona bene ma in caso contrario non sarà incluso nelle corrispondenze risultanti.

Questo potrebbe non essere affatto un bug se quello che vuoi è abbinare solo gli elementi con le informazioni sui dati impostate da te, ma in caso contrario ti rimangono due opzioni.

Non usare jquery-ui ed estendi il tuo pseudo-selettore $(: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]);
   }
});

Mostra snippet di codice

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

Espandi lo snippet

Usa jquery-ui con lo :datapseudoselettore e unisci i risultati della selezione [data-myAttr]per includere quelli che potrebbero essere saltati

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

Mostra snippet di codice

 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>

Espandi lo snippet

— devconcept
fonte

Questo faceva parte della soluzione al mio problema di selezionare elementi con attributi data- * senza conoscere l'id effettivo o il nome dell'attributo dati. Ho trovato il modo per estendere jQuery per farlo, altrove, ma +1 qui per lo snippet di codice per mostrare l'applicazione pratica. Altri danno quanto basta per suggerire, ma a volte è necessario MOSTRARE come USARE le informazioni fornite. Grazie! :)

— Brandon Elliott

7

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

— Khalid
fonte

2

~~Seleziona gli elementi che ho impostato in precedenza jquery.data();~~

La domanda è trovare tutti gli elementi con una chiave specifica e non i dati.

Prova a utilizzare 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>

Espandi lo snippet

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

— ospite271314
fonte

Grazie per la risposta La domanda è per trovare tutti gli elementi con una chiave specifica e non i dati.

— Argiropoulos Stavros

@ArgiropoulosStavros È necessario restituire elementi con html data-*set di attributi, oltre che jQuery.data()impostati?

— guest271314