9

Na página existem diversos elementos com atributos data. Para evitar andar a adicionar classes de CSS ao elementos, tornado o código da página mais denso, gostaria de selecionar elementos pelo nome do atributo data.

Exemplo

<div id="myDiv" class="text banana" data-my-target="John"></div>
<div id="myOther" class="text bread" data-my-target="Doe"></div>
<div id="myBother" class="text fun" data-my-girl="Jane"></div>

A ideia é aplicar determinada ação via jQuery aos elementos que contenham um atributo data-my-target.

Pergunta

Como posso selecionar elementos pelo nome do atributo data?

3 Respostas 3

9

Você pode usar o seguinte:

div[data-my-target]

Isso busca elementos que contenham esse atributo. Também é possível filtrar o atributo pelo valor. Por exemplo:

div[data-my-target="John"]

O = casa elementos cujo atributo seja a string passada. Se quiser casar parcialmente o valor "John" (por exemplo, se o valor for "John Paul"), use *=:

div[data-my-target*="John"]

Porém, acredito que a performance de usar uma classe seja melhor (não testei).

Referência útil (em inglês): MDN CSS Attribute selectors

0
5

A resposta do bfavareto é a correcta.

Só para documentar mais 2 exemplos e diferenças de performance.

1 :

$('div[data-my-target]');  // mais compatível com browsers antigos

2 :

$('div').filter('[data-my-target]'); 
// ou:
arrayEmCache.filter('[data-my-target]'); // no caso de já haver uma array de elementos em cache

3 :

document.querySelectorAll('[data-my-target]'); // mais rápida mas não compatível com IE<8
0

Modelo mais atual:

var target = $("#suaDIV").data("my-target");
1
  • como posso selecionar o valor do atributo ? Commented 3/10/2017 às 13:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .