X

[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");

 

 

 

Juliano Rossetto: Formado em Analise e Desenvolvimento de Sistemas. Desenvolvedor dos principais CMS ( Wordpress, Joomla). Desenvolvedor de E-commerce (Opencart e WooCommerce). Analista de SEO: Otimização de sites para mecanismos de buscas. Analista de Infraestrutura voltado para servidores na nuvem: Amazon Web Services (AWS), DigitalOcean e Linode. Para dúvidas ou serviços entre em contato aqui.
Posts relacionados