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:

html<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:

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

HTML the code will look like this:

html<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:

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

We use the wrapAll method:

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

As a result, we get the following HTML code:

html<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.