jQuery: a manipulação .wrap()

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

Osvaldo

Mocheco⊗Marafado

Desta vez vou mostar como o jQuery é útil quando não temos acesso ao HTML para criar uma div envolvendo um outro elemento e como convém, lembrar que para melhor entender esta série 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()

Há algum tempo atrás para resolver um problema em que não tinha acesso ao elemento onde precisava alterar algumas coisas no HTML, tive que socorrer-me do jQuery e dum script que escrevi, onde utilizei uma função que tendo como referencia um elemento existente, cria um novo elemento em redor do que já existe.

Essa função é a manipulação .wrap() e a melhor maneira de explicar como funciona é com um exemplo...

Imaginem que a imagem seguinte é um avatar que está dentro da div ExemploAvatarIMG.
Mas queremos que ela fique dentro da div NovoExemploAvatar, cujos estilos colocamos também no código abaixo:

A parte do HTML

ver código

imprimir?

1	<div class="ExemploAvatarIMG">

2	<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6dJ5JHZPCEoxwsPdIiWGhDxOvsxhszWjP90diHTEd7-aEUYK0BlmLfzaK83-buRWUYAA3-zUu2i94B-NbDsLMVogs_iw-9Ubdo52fdMl5yFNqs7JeRWbWf4NJakbfN2egCJK8UuU_SPKQ/s96-c/Render1.jpg" alt="exemplo de avatar" />

3

</div>

A parte do CSS(estilos)

ver código

imprimir?

01	.ExemploAvatarIMG {

02	border:1px dotted red;

03	background: rgba(255, 255, 145, 0.5);

04	padding: 5px 3px;

05	box-shadow:0 0 3px #fff;

06

}

07	.NovoExemploAvatar {

08	border:4px double lime;

09	background: rgba(255, 0, 255, 0.5);

10	padding: 20px 5px;

11	box-shadow:inset 0 0 15px #000;

12

}

Como podem ver, a imagem aparece com os estilos definidos para ExemploAvatarIMG mas não para NovoExemploAvatar porque esse elemento ainda não existe.

Agora colocamos o script abaixo e vejam a diferença:

A parte do javascript

ver código

imprimir?

1

<script>

2	$('.ExemploAvatarIMG').wrap('<div class="NovoExemploAvatar"></div>');

3

</script>

Como podem verificar, agora já existe a nova div NovoExemploAvatar e os estilos definidos no CSS já são visíveis.

E embora este exemplo esteja um pouco simplificado, acho que dá para entender e se quiserem podem ver outros na pagina da manipulação .wrap().

A seguir explico como o jQuery faz para apanhar um elemento acima dum outro que tomamos como referência.

Até Breve.

Queres ler outro artigo ao calhas?