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

Argiropoulos Stavros
fonte

Respostas:

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.

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

  2. 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]')

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>

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