modificar - pegar o valor de um atributo data jquery




Selecionando Elemento por Atributo de Dados (8)

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.


Exemplos nativos de JS

Obter NodeList de elementos

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

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

Obter o primeiro elemento

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

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

Apenas para completar todas as respostas com algumas características do 'padrão de vida' - Até agora (na era do html5) é possível fazer isso sem uma biblioteca de terceiros:

  • JS puro / simples com querySelector (usa seletores de 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] ou input[type]

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!';
<a data-customerID='22'>test</a>

Info:


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]');

Para selecionar todas as âncoras com o atributo de data-customerID==22 , você deve incluir 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"]');

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'});  
     });

$('*[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 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 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') ).





custom-data-attribute