jQuery: o selector .parent()

Publicada originalmente em 10 de Setembro de 2012.
Texto corrigido e actualizado com novas ligações.

Osvaldo

Mocheco⊗Marafado

Para começar este artigo convém lembrar que para melhor entender esta serie de artigos é recomendado ler antes:

1. jQuery: O Efeito show
2. jQuery: o Efeito hide
3. jQuery: o Efeito toogle
4. jQuery: selector next
5. jQuery: o atributo attr()
6. jQuery: a manipulação .wrap()

Antes de mostrar como se utiliza o jQuery para apanhar um elemento acima do que tomamos como referencia, acho melhor tentar explicar como um site (ou blogue) se apresenta.

E uma das maneiras de fazer isso é a seguinte: imaginem caixinhas dentro de caixas dentro de caixotes.

Cada bloco ou elemento presente num site ou blogue é basicamente isso mesmo, uma caixa que neste caso é uma div.
Mesmo num blogue onde existe as b:section, nada mais são que divs também.

Tentando colocar a coisa em termos visíveis:

Div UM ou o corpo

Div DOIS ou sidebar

Div DOIS.1

Div TRÊS

Div TRÊS.1

E este é o codigo HTML do exemplo acima, não vou colocar os estilos do CSS porque não são muito relevantes para este exemplo.
Basta dizer que a cor do fundo (background-color) no CSS é igual em todos os elementos presentes no exemplo acima.

ver código

imprimir?

01	<div id="one">Div UM ou o corpo

02	<div class="four">Div DOIS ou sidebar

03	<div class="three">Div DOIS.1

04

</div>

05

</div>

06	<div class="two">Div TRÊS

07	<div class="three">Div TRÊS.1

08

</div>

09

</div>

10

</div>

Duas coisas a notar, existe uma div com uma ID. As IDs precisam ser únicas, caso seja necessário dar estilos iguais a varias IDs, é melhor utilizar as class tal como no exemplo acima.

A segunda coisa refere-se ao modo como as divs estão apresentadas. Se repararem, existe uma div principal que podemos chamar de o corpo e 2 outras secções com sub-secções.
Reparem como no código apresentado, as divs DOIS.1 e TRÊS.1 estão dentro das respectivas divs DOIS e TRÊS, tal como essas estão dentro da div principal.

Ou seja, na linguagem do jQuery e como exemplo, podemos dizer que a div DOIS.1 é filha da div DOIS ou de outra forma, que a div DOIS é mãe (parent) da Dois.1 e de qualquer outra div que acrescentemos nessa secção.

Agora imaginemos que queríamos mexer na div acima de DOIS.1 mas não tínhamos acesso ao código HTML. É nesta parte que entra o jQuery e o selector .parent().

E é utilizando o script seguinte que no exemplo acima, as divs DOIS e TRÊS se apresentam com um fundo branco apesar de possuírem class diferentes. Porque, como podem reparar, no script abaixo utlizo a class three, comum a ambas as divs para alterar a cor do fundo das divs imediatamente acima (parent).

ver código

imprimir?

1

<script>

2	$('.three').parent().css('background-color', 'white');

3

</script>

Acho que já dá para entender e se quiserem podem ver outros na pagina do selector .parent().

Até Breve.

Queres ler outro artigo ao calhas?