Selecionando o elemento pai com Jquery

Olá, bom dia pessoal, nesta bela manhã de terça feira venho aqui com mais um tutorial, quantas vezes você precisou selecionar o elemento pai de um elemento ? ou seja, o elemento onde ele está contido.
veja a seguinte situação:

O elemento com cor de laranja (p) é o elemento pai e o elemento em tom de cinza (span) o elemento filho, vamos selecionar o elemento span e através dele nós mudaremos a cor do elemento pai:




Veja acima o código do projeto, colocaremos sempre a partir de agora nossos códigos no Codepen para que possamos ver em execução.

Bom até aqui tudo bem nada de muito novo, utilizamos o parent para selecionar o elemento pai, mas agora teremos uma situação onde nosso elemento pai estará dentro de duas divs, entao o elemento p estará dentro de duas divs e precisamos alterar a cor da ultima div:

Nosso elemento p está com cor branca e precisamos alterar a cor da div azul, para isso vamos utilizar o closest do jquery:






Se quisermos alterar a div de cor amarela basta usarmos closest(".div02")



Isto pode ter várias aplicações você pode criar um efeito para aplicar uma cor no elemento pai ao passar o mouse sobre um botão ou imagem.


Bom pessoal, espero que este tutorial possa ter sido útil para vocês de alguma forma.

Tenham todos um ótimo dia !!!