jQuery wrap和wrapAll之间的区别

Question

jQuery .wrap和.wrapAll有什么不同？它们做的几乎是一样的事情，但有什么不同呢？

Answer 1

请注意描述中的差异：

HTML :在匹配元素集中的每个

元素的周围包装一个结构。：将一组匹配的元素中的所有元素包装在周围。

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

Answer 2

WrapAll包装所有元素，Wrap包装每个元素。

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

结果是将所有内部div包装在一个新的div中

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

Wrap结果是... 每个元素

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

Answer 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>