[Jquery] – Como recuperar dados através de data atributos ou data attribute

Para você economizar em códigos e seu otimizar seu html, podemos definir links através de data atributos ou data attribute.

Como recuperar parametros em data atributos?

Através da biblioteca jQuery conseguimos recuperar qualquer data atributos de uma determinada classe ou ID.

Vamos utilizar um exemplo onde substituiremos a tag <a> por um data atributo.
Utilizando a tag <a>:

<div id="links">
<ul>
<li><a href="#link1" class="link">Link 1<a/></li>
<li><a href="#link2" class="link">Link 2<a/></li>
<li><a href="#link3" class="link">Link 3<a/></li>
<li><a href="#link4" class="link">Link 4<a/></li>
<li><a href="#link5" class="link">Link 5<a/></li>
</ul>
</div>

Agora vamos criar o mesmo código utilizando o data atributo:

<div id="links">
<ul>
<li class="link" data-url="#link1">Link 1</li>
<li class="link" data-url="#link2">Link 2</li>
<li class="link" data-url="#link3">Link 3</li>
<li class="link" data-url="#link4">Link 4</li>
<li class="link" data-url="#link5">Link 5</li>
</ul>
</div>

coloque antes de fechar a tag </body> seu código jquery para funcionar os links.

jQuery( document ).ready(function() {
		jQuery(".link").click(function(){
   				    window.location = jQuery(this).attr("data-url");
  				    return false;
		});
});

Isso vale para qualqer atributo, porém sempre devemos utilizar o nome sem ascentos e inciando com “data-”

para recuperar de uma determinada classe podemos usar o

var atributo;
atributo = jQuery('.suaclasse').attr("data-nomedoseuatributo");