Selecionando elemento por atributo de dados

Existe um método fácil e direto para selecionar elementos com base em suas data atributos? Por exemplo, selecione todas as âncoras que possuam atributo de dados customerIDcom o valor de 22.

Eu hesito em usar relou outros atributos para armazenar essas informações, mas acho muito mais difícil selecionar um elemento com base em quais dados são armazenados nele.

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

Você deve poder omitir o *, mas, se bem me lembro, dependendo da versão do jQuery que você estiver usando, isso pode gerar resultados defeituosos.

Observe que, para compatibilidade com a API Selectors ( document.querySelector{,all}), as aspas ao redor 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 jQuery, pode considerar o uso do plug-in de atributos de dados customizados HTML5 . Isso permite que você escreva um 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 .attr('data-foo')).

Para pessoas que pesquisam no Google e desejam regras mais gerais sobre como selecionar com atributos de dados:

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

<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>

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

<div data-test="foo">Exact Matches</div>
<div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>

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

<div data-test="the_exact_value">Exact Matches</div>

mas não

<div data-test="the_exact_value foo">This won't match</div>

O uso $('[data-whatever="myvalue"]')selecionará qualquer coisa com atributos html, mas no jQueries mais recente, parece que, se você usa $(...).data(...)para anexar dados, ele usa algum navegador mágico e não afeta o html, portanto, não é descoberto .findcomo indicado na resposta anterior .

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

var $container = $('<div><div id="item1"/><div id="item2"/></div>');

// 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 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);

// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');

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

var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!';

<a data-customerID='22'>test</a>

Informações:

• atributos de dados

• .querySelectorAll ();

Para selecionar todas as âncoras com o atributo de dados data-customerID==22, inclua o alimite do escopo da pesquisa apenas nesse tipo de elemento. Fazer pesquisas de atributos de dados em um loop grande ou em alta frequência quando houver muitos elementos na página pode causar problemas de desempenho.

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

Exemplos JS nativos

Obter NodeList de elementos

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

html: <div data-id="container"></div>

Obter o primeiro elemento

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

html: <div id="container"></div>

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

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

html:

<div class="footer">
    <div data-id="12"></div>
    <div data-id="22"></div>
</div>

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

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

html:

<div data-selection="20"></div>
<div data-section="12"></div>

Obter elementos com base em valores de dados combinados (AND)

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

html:

<div data-prop1="12" data-prop2="20"></div>

Obter itens onde o valor começa com

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

via método Jquery filter ():

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

HTML:

<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>

JavaScript:

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

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

Se você definir o atributo de dados desta maneira:, $('div').data('XXX', 111)ele funcionará apenas se você definir o atributo de dados diretamente no DOM, assim:$('div').attr('data-XXX', 111) .

Eu acho que é porque a equipe do jQuery otimizou o coletor de lixo para evitar vazamentos de memória e operações pesadas na reconstrução do DOM em cada atributo de alteração de dados.

Para que isso funcione no Chrome, o valor não deve ter outro par de aspas.

Funciona apenas, por exemplo, assim:

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

Às vezes, é desejável filtrar elementos com base no fato de eles terem itens de dados anexados a eles programaticamente (também conhecido como não através de atributos dom):

$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();

Apenas para completar todas as respostas com alguns recursos do 'padrão de vida' - Até agora (na era html5), é possível fazê-lo sem uma biblioteca de terceiros:

• JS puro / simples com querySelector (usa seletores CSS):
  • selecione o primeiro no DOM: document.querySelector('[data-answer="42"],[type="submit"]')
  • selecione tudo no DOM: document.querySelectorAll('[data-answer="42"],[type="submit"]')
• CSS puro / simples
  • algumas tags específicas: [data-answer="42"],[type="submit"]
  • todas as tags com um atributo específico: [data-answer]ouinput[type]