Navegando até o elemento pai usando jQuery.
As vezes precisamos navegar até o elemento pai de um botão para pegar algum atributo dele ou até mesmo poder usá-lo como base para pegar algum dados de seus filhos. Para isso, iremos ensinar a usar o closest do jQuery.
Autor: André Rodrigues
Tags:
#javascriptCONTEÚDO
Olá amigos, tudo bem?
Nesse artigo, iremos aprender uma forma fácil e prática de navegar entre os elementos de uma estrutura HTML. Para ilustrar bem vou fazer uma estrutura HTML com um botão e assim que esse botão for clicado ele mudará a cor de outro elemento.
Vamos começar com o arquivo HTML.
basico.html
Com o HTML pronto, iremos passar para o arquivo JS onde ocorrerá a ação.
basico.js
Como podemos ver, ao clicar no button ele percorre a estrutura até chegar na tag li mudando sua class para ativo. O closest funciona tanto com a tag como com class e id, basta passar o valor.
Para ficar mais fácil o entendimento, vou fazer um exemplo mais complexo onde enviarei um formulário usando o closest, para buscar as informação.
Vamos começar com o arquivo HTML.
avancado.html
Agora o JS.
avancado.js
Por fim, os arquivos php receberão as informações enviadas, esses arquivos irão apenas validar os dados e não salvar no banco de dados porque essa não é a intenção do artigo.
fale-conosco.php
newsletter.php
Com tudo pronto, você verá que com um único evento de click no javascript você envia qualquer formulário no site, mesmo tendo vários na mesma página e isso só é possível graças ao closest.
Pronto pequeno Padawan! Acho que deu para explicar bem a função do closest e espero que você possa usá-lo de agora em diante.
Quer aprender tudo sobre JavaScript? Clique aqui e veja todos os artigos.