Jquery seleciona todos os elementos que possuem $ jquery.data ()

96

Selecione os elementos que defini anteriormente com jquery.data();

ou seja, selecione todos os elementos .data('myAttr')já definidos.

SOLUÇÃO

Um jsfiddle para demonstrar é Fiddle

javascript jquery jquery-selectors

— Argiropoulos Stavros
fonte

98

Você poderia fazer

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

isso seleciona todos os elementos que têm um atributo data-myAttrque não é igual a '' (portanto, deve ter sido definido);

você também pode usar o filtro ()

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

— Nicola Peluchetti
fonte

67

Ou apenas:$('[data-myAttr]')

— andlrc

4

Pensei a mesma coisa. Não funciona como esperado. veja esta DEMO

— gdoron está apoiando Monica em

um fechamento 'está faltando na primeira parte do código (não é possível editar a resposta diretamente)

— Florent2

1

$ ('[data-myAttr! = ""]'); retornará elementos que não o têm atribuído. O comentário de @NULL apenas obtém elementos que o tenham definido.

— arleslie

6

ERRADO! solução correta: $ ('[data-myAttr]') - veja a resposta abaixo para explicação

— BassMHL

74

A melhor e simples maneira de selecioná-los é:

$('[data-myAttr]')

Mais Informações:

Eu testei muitas coisas.

Usar $('[data-myAttr!=""]')não funciona para todos os casos. Porque os elementos que não possuem um data-myAttrconjunto, terão seus data-myAttriguais undefinede $('[data-myAttr!=""]')os selecionarão também, o que é incorreto.

— Ashkan Mobayen Khiabani
fonte

3

Isso só funciona com atributos de dados definidos na marcação. Ele NÃO funciona com atributos de dados definidos via jQuery, consulte jsfiddle.net/2p7h0Lj8/1

— Sophivorus

19

Você pode usar o filtro () :

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

— Frédéric Hamidi
fonte

1

Estava prestes a postar isso, aqui está um violino para mostrar que funciona: jsfiddle.net/gbHFZ/1

— Rory McCrossan

1

Por que o seletor de atributos não faz o trabalho? $('[data-myAttr]')?

— gdoron está apoiando Monica em

6

@gdoron, isso ocorre porque data()o formulário getter de realmente lê os data-atributos HTML5 , mas seu formato setter não os cria nem os atualiza.

— Frédéric Hamidi

ummm, então onde ele salva os dados? você pode me dar uma referência? Eu li isso "(todos os valores de dados são armazenados internamente no jQuery)." mas onde???

— gdoron está apoiando Monica em

3

@gdoron, os dados são persistidos em um cache global, codificados por um id que é associado ao elemento por meio de uma propriedade expando.

— Frédéric Hamidi

17

Você pode usar esta extensão do jQuery Selector: Consultando dados do elemento

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

— Roberkules
fonte

O jQuery UI já tem isso, então alguns podem não precisar chamar a função anônima. api.jqueryui.com/data-selector

— arleslie

7

Você pode usar JQuery UI com o seletor: data ()

Seleciona elementos que possuem dados armazenados na chave especificada.

Verifique este jsfiddle para um exemplo

Para obter todos os elementos correspondentes, .data('myAttr')você pode usar

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

Isso deve funcionar para elementos com data-atributos e elementos com dados armazenados usando $.data()porque

A partir do jQuery 1.4.3 HTML 5, atributos de dados serão automaticamente puxados para o objeto de dados jQuery.

Mas isso não funciona muito bem. Verifique este jsfiddle e você verá que na segunda vez que o seletor é chamado, ele deve corresponder a 2 elementos e está correspondendo apenas a um. Isso se deve a "um bug" na biblioteca jquery-ui.

Isso é obtido do arquivo principal 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 ] );
        }
});

Como você pode ver que eles estão usando $.data(elem, match), em vez $(elem).data(match)que faz com que o cache não ser atualizado no caso de você está solicitando elementos com data-atributos. Se o elemento foi testado para data()armazenamento, isso funciona bem, mas se não, não será incluído nas correspondências resultantes.

Isso pode não ser um bug se o que você quer é combinar apenas os elementos com as informações de dados definidas por você, mas se não, você tem duas opções.

Não use jquery-ui e estenda seu próprio pseudo-seletor $(: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]);
   }
});

Exibir trecho de código

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

Expandir trecho

Use jquery-ui com o :datapseudoselector e junte os resultados da seleção [data-myAttr]para incluir aqueles que podem ser ignorados

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

Exibir trecho de código

 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>

Expandir trecho

— devconcept
fonte

Isso foi parte da solução para meu problema de selecionar elementos com atributos data- * sem saber o id real ou o nome do atributo de dados. Eu encontrei a maneira de estender o jQuery para fazer isso, em outro lugar, mas 1 aqui para o trecho de código para mostrar a aplicação prática. Outros fornecem apenas o suficiente para dar uma dica, mas às vezes você precisa MOSTRAR como USAR as informações fornecidas. Obrigado! :)

— Brandon Elliott

7

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

— Khalid
fonte

2

~~Selecione os elementos que defini anteriormente com jquery.data();~~

A questão é encontrar todos os elementos com uma chave específica e não quaisquer dados.

Tente utilizar 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>

Expandir trecho

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

— guest271314
fonte

Obrigado pela resposta. A questão é encontrar todos os elementos com uma chave específica e não quaisquer dados.

— Argiropoulos Stavros

@ArgiropoulosStavros É necessário retornar elementos que possuem html data-*conjunto de atributos, bem como jQuery.data()conjunto?

— guest271314