Difference between jQuery wrap and wrapAll

Question

What's the difference between jQuery .wrap and .wrapAll? They pretty much do the same thing, but what could be the difference?

Answer 1

Notice the difference in the descriptions:

.wrap(): Wrap an HTML structure around each element in the set of matched elements. .wrapAll(): Wrap an HTML structure around all elements in the set of matched elements.

.wrap() wraps every element individually, but .wrapAll() wraps all of them as a group.

For example:

<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

With $('.foo').wrap('<div class="bar" />');, this happens:

<div class="bar"><div class="foo"></div></div>
<div class="bar"><div class="foo"></div></div>
<div class="bar"><div class="foo"></div></div>

But with $('.foo').wrapAll('<div class="bar" />');, this happens:

<div class="bar">
  <div class="foo"></div>
  <div class="foo"></div>
  <div class="foo"></div>
</div>

Answer 2

WrapAll wraps ALL elements, Wrap wraps EACH element.

$('.inner').wrapAll('<div class="new" />');

Results in wrapping ALL inner-divs in one new div

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

Wrap results in ... EACH element

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>