Envolvendo vários elementos em jQuery

É possível envolver não cada elemento individualmente, mas todos os elementos encontrados juntos usando o método wrapAll.

O código HTML apresenta um grupo de parágrafos:

html<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

Vamos encontrar todos os parágrafos com a classe www e envolvê-los em uma tag div:

javascript$('.www').wrapAll('<div></div>');

O código HTML ficará assim:

html<div>
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
</div>
<p>text</p>

Observe que se os elementos a serem envolvidos não estiverem próximos um do outro, o método wrapAll primeiro moverá os elementos para um local comum e só então os envolverá. Veja o exemplo a seguir:

html<p class="www">text1</p>
<p class="www">text2</p>
<p>text</p>
<p class="www">text3</p>

Aplicamos o método wrapAll:

javascript$('.www').wrapAll('<div></div>');

Como resultado, obtemos o seguinte código HTML:

html<div>
  <p class="www">text1</p>
  <p class="www">text2</p>
  <p class="www">text3</p>
</div>
<p>text</p>

Os métodos de envolvimento de elementos também permitem a aplicação de uma função a cada elemento no conjunto.