4

Quero selecionar todos os atributos personalizados e fazer uma validação com eles, só que não sei como posso pega o valor do "attr" dentro de um loop, já que são eles que estão sendo iterados.

Exemplo HTML:

<input type="text" data-selected="teste" value="fulano" name="nome">
<input type="text" data-selected="teste2" value="de tal" name="sobrenome">

Exemplo:

$('[data-selected]').each(function(){

       alert( $(this).attr() ); // -> teste / teste2
});

2 Respostas 2

5

Pode fazer uso da API dataset(ver suporte no "Can I use") para obter os data-attributes de um elemento específico:

[...document.querySelectorAll('[data-selected]')].map(element => {
  alert(element.dataset.selected)
})
<div data-selected="teste"></div>
<div data-selected="teste2"></div>

Se realmente tiver a necessidade de utilizar jQuery, existe a função data() que pode ser utilizada especificando o nome do atributo:

$(function(){
  $('[data-selected]').each(function(){
       alert( $(this).data('selected') );
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div data-selected="teste"></div>
<div data-selected="teste2"></div>

1

1) O seletor deve ser assim: input[data-selected]. O que vai buscar os inputs que tenham o atributo data-selected definidos.

Fonte: API jQuery - Has Attribute Selector

2) Para receber o valor do atributo, deve informá-lo no método .attr(), como sugere a documentação do jQuery. Então, deve ficar assim: $(this).attr('data-selected');.

Fonte: API jQuery - .attr()

Finalmente, seu código ficaria assim:

$('input[data-selected]').each(function(){
    alert( $(this).attr('data-selected') ); // -> teste / teste2
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="text" data-selected="teste" value="fulano" name="nome">
<input type="text" data-selected="teste2" value="de tal" name="sobrenome">

5
  • 1
    Uma explicaçao da resposta seria muito bem vinda! ;)
    – user28595
    Commented 9/12/2018 às 16:11
  • Obrigado pela resposta, mas não se limita somente ao input, pode ser select etc também
    – Thiago
    Commented 9/12/2018 às 16:16
  • Lógico. Basta informar o elemento-alvo no seletor do jQuery! @ArticunoL Feito!
    – LipESprY
    Commented 9/12/2018 às 16:18
  • Por que não só $(['data-selected'])?
    – Thiago
    Commented 9/12/2018 às 17:34
  • Dá certo tb. Mas quando vc define o seletor nos input previne buscar outros "possíveis elementos" que talvez não sejam desejados...
    – LipESprY
    Commented 9/12/2018 às 17:41

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 .