Разница между оберткой jQuery и wrapAll

Ответ 1

Обратите внимание на разницу в описаниях:

.wrap(): оберните структуру HTML вокруг элемента each в наборе согласованных элементов. .wrapAll(): оберните структуру HTML вокруг элементов all в наборе согласованных элементов.

.wrap() обертывает каждый элемент отдельно, но .wrapAll() обертывает все из них как группу.

Например:

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

С $('.foo').wrap('<div class="bar" />'); это происходит:

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

Но с $('.foo').wrapAll('<div class="bar" />'); это происходит:

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

Ответ 2

WrapAll обертывает ВСЕ элементы, обертывает обложки КАЖДОЙ элемент.

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

Результаты в обертке ВСЕ внутренние-divs в одном новом div

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

Оберните результаты... КАЖДЫЙ элемент

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

Ответ 3

Adding jquery to execute a wrap:

$(‘p’).wrap(‘<span class="newclass" />’);

will result in:

<span class="newclass">
<p>This is a paragraph.</p>
</span>

<span class="newclass">
<p>This is a paragraph.</p>
</span>

<span class="newclass">
<p>This is a paragraph.</p>
</span>



Substitute the .wrap for .wrapAll.

$(‘p’).wrapAll(‘<span class="newclass" />’);

will result in:

<span class="newclass">
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</span>



Now try out .wrapInner.

$(‘p’).wrapInner(‘<span class="newclass" />’);

will result in:

<p><span class="newclass">This is a paragraph.</span></p>
<p><span class="newclass">This is a paragraph.</span></p>
<p><span class="newclass">This is a paragraph.</span></p>