Selecionando Elemento por Atributo de Dados

Existe um método fácil e direto para selecionar elementos com base em seu atributo de data ? Por exemplo, selecione todas as âncoras que possuem o atributo de dados chamado customerID que possui valor 22 .

Eu estou meio hesitante em usar rel ou outros atributos para armazenar tais informações, mas acho muito mais difícil selecionar um elemento com base em quais dados estão armazenados nele.

 $('*[data-customerID="22"]'); 

Você deve ser capaz de omitir o * , mas se bem me lembro, dependendo de qual versão do jQuery você está usando, isso pode dar resultados errados.

Observe que, para compatibilidade com a API Seletores ( document.querySelector{,all} ), as cotações em torno do valor do atributo ( 22 ) não podem ser omitidas nesse caso .

Além disso, se você trabalha muito com atributos de dados em seus scripts da jQuery, pode considerar o uso do plug-in de atributos de dados customizados HTML5 . Isso permite que você escreva código ainda mais legível usando .dataAttr('foo') e resulta em um tamanho de arquivo menor após a minificação (comparado ao uso de .attr('data-foo') ).

Para as pessoas que pesquisam no Google e querem regras mais gerais sobre a seleção com atributos de dados:

$("[data-test]") selecionará qualquer elemento que tenha apenas o atributo de dados (não importando o valor do atributo). Incluindo:

 
attributes with values
attributes without values

$('[data-test~="foo"]') irá selecionar qualquer elemento onde o atributo de dados contenha foo mas não precise ser exato, como:

 
Exact Matches
Where the Attribute merely contains "foo"

$('[data-test="the_exact_value"]') selecionará qualquer elemento em que o valor exato do atributo de dados seja the_exact_value , por exemplo:

 
Exact Matches

mas não

 
This won't match

Usar $('[data-whatever="myvalue"]') irá selecionar qualquer coisa com atributos html, mas em jQueries mais novas parece que se você usar $(...).data(...) para append dados, usa algum navegador mágico e não afeta o html, portanto não é descoberto por .find como indicado na resposta anterior .

Verificar (testado com 1.7.2+) (veja também violino ): (atualizado para ser mais completo)

 var $container = $('
'); // add html attribute var $item1 = $('#item1').attr('data-generated', true); // add as data var $item2 = $('#item2').data('generated', true); // create item, add data attribute via jquery var $item3 = $('
', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' }); $container.append($item3); // create item, "manually" add data attribute var $item4 = $('
Item 4
'); $container.append($item4); // only returns $item1 and $item4 var $result = $container.find('[data-generated="true"]');

Para selecionar todas as âncoras com o atributo de data-customerID==22 , você deve include o a para limitar o escopo da pesquisa apenas a esse tipo de elemento. Fazer pesquisas de atributos de dados em um loop grande ou em alta freqüência quando há muitos elementos na página pode causar problemas de desempenho.

 $('a[data-customerID="22"]'); 

Eu não vi uma resposta JavaScript sem jQuery. Espero que ajude alguém.

 var elements = document.querySelectorAll('[data-customerID="22"]'); elements[0].innerHTML = 'it worked!'; 
 test 

via método jquery filter ():

http://jsfiddle.net/9n4e1agn/1/

HTML:

   

JavaScript:

 $(function() { $('button').filter(function(){ return $(this).data("id") == 2}).css({background:'red'}); }); 

A construção como esta: $('[data-XXX=111]') não está funcionando no Safari 8.0 .

Se você definir o atributo de dados desta forma: $('div').data('XXX', 111) , ele só funcionará se você definir o atributo de dados diretamente no DOM da seguinte forma: $('div').attr('data-XXX', 111) .

Eu acho que é porque o time de garbage collection otimizado da equipe do jQuery para evitar vazamentos de memory e operações pesadas na reconstrução do DOM em cada atributo de dados de mudança.

Para que isso funcione no Google Chrome, o valor não deve ter outro par de citações.

Só funciona, por exemplo, assim:

 $('a[data-customerID=22]'); 

Exemplos nativos de JS

Obter NodeList de elementos

 var elem = document.querySelectorAll('[data-id="container"]') 

html:

Obter o primeiro elemento

 var firstElem = document.querySelectorAll('[id="container"]')[0] 

html:

Segmente uma coleção de nós que retorna um nodelist

 document.getElementById('footer').querySelectorAll('[data-id]') 

html:

  

Obter elementos baseados em vários valores de dados (OR)

 document.querySelectorAll('[data-section="12"],[data-selection="20"]') 

html:

 

Obter elementos baseados em valores de dados combinados (AND)

 document.querySelectorAll('[data-prop1="12"][data-prop2="20"]') 

html:

 

Obter itens em que o valor começa com

 document.querySelectorAll('[href^="https://"]') 

Às vezes é desejável filtrar os elementos com base em se eles possuem itens de dados anexados a eles programaticamente (também conhecido como não via dom-attributes):

 $el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething(); 

O acima funciona, mas não é muito legível. Uma abordagem melhor é usar um pseudo-seletor para testar esse tipo de coisa:

 $.expr[":"].hasData = $.expr.createPseudo(function (arg) { return function (domEl) { var $el = $(domEl); return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined"; }; }); 

Agora podemos refatorar a declaração original para algo mais fluente e legível:

 $el.filter(":hasData('foo-bar')").doSomething();