Wrapping Multiple Elements in jQuery

You can wrap not each element separately, but all found elements together using the wrapAll method.

The HTML code shows a group of paragraphs:

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

Let's find all paragraphs with the class www and wrap them in a single tag div:

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

HTML the code will look like this:

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

Note that if the elements being wrapped are not adjacent, the wrapAll method will first move the elements into one place and then wrap them. See the following example:

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

We use the wrapAll method:

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

As a result, we get the following HTML code:

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

Element wrapping methods also provide the ability to apply a function to each element in the set.

Wrap all h2 into one i.