Encapsulation de plusieurs éléments dans jQuery

Il est possible d'encapsuler non pas chaque élément individuellement, mais tous les éléments trouvés ensemble à l'aide de la méthode wrapAll.

Le code HTML présente un groupe de paragraphes :

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

Trouvons tous les paragraphes avec la classe www et encapsulons-les dans une balise div :

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

Le code HTML deviendra alors :

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

Notez que si les éléments à encapsuler ne sont pas adjacents, la méthode wrapAll va d'abord déplacer les éléments au même endroit, puis les encapsulera. Regardez l'exemple suivant :

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

Appliquons la méthode wrapAll :

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

Au final, nous obtenons le code HTML suivant :

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

Les méthodes d'encapsulation d'éléments prévoient également la possibilité d'appliquer une fonction à chaque élément dans l'ensemble.