- Obter link
- X
- Outras aplicações
Para começar este artigo convém lembrar que para melhor entender esta serie de artigos é recomendado ler antes:
- jQuery: O Efeito show
- jQuery: o Efeito hide
- jQuery: o Efeito toogle
- jQuery: selector next
- jQuery: o atributo attr()
- 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:
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.
<div id="one">Div UM ou o corpo <div class="four">Div DOIS ou sidebar <div class="three">Div DOIS.1 </div> </div> <div class="two">Div TRÊS <div class="three">Div TRÊS.1 </div> </div> </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).
<script> $('.three').parent().css('background-color', 'white'); </script>
Acho que já dá para entender e se quiserem podem ver outros na pagina do selector .parent().
Até Breve. :-F
- Obter link
- X
- Outras aplicações
Aspirante a Artista Digital, Moderador no site Heromorph desde 2007. Um dos fundadores do Quadradinhos inK, projecto de BD com artistas de Portugal e Brasil.
Gosto de BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, um blogue sobre nada e mais alguma coisa.
BloggerTwitterFacebookPinterestStackOverflowNexusModsGOG.comSteamContactoPaypal
Gosto de BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, um blogue sobre nada e mais alguma coisa.
BloggerTwitterFacebookPinterestStackOverflowNexusModsGOG.comSteamContactoPaypal
Comentários
Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.
Mas antes de comentarem, leiam as minhas Regras dos Comentários.
Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.
Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.
Enviar um comentário