jQuery: a manipulação .wrap()

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

<div class="ExemploAvatarIMG">
<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" />
</div>

A parte do CSS(estilos)

.ExemploAvatarIMG {
   border:1px dotted red;
   background: rgba(255, 255, 145, 0.5);
   padding: 5px 3px;
   box-shadow:0 0 3px #fff;
}
.NovoExemploAvatar {
   border:4px double lime;
   background: rgba(255, 0, 255, 0.5);
   padding: 20px 5px;
   box-shadow:inset 0 0 15px #000;
}

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

<script>
$('.ExemploAvatarIMG').wrap('<div class="NovoExemploAvatar"></div>');
</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. :-F

Queres ler outro artigo ao calhas?