jquery - jQuery wrap 和 wrapAll 的区别

Question

jQuery .wrap 和 .wrapAll 有什么区别？他们几乎做同样的事情，但有什么区别呢？

Answer 1

注意描述的不同：

.wrap(): 围绕匹配元素集中的 每个元素包裹一个 HTML 结构。: 围绕匹配元素集中的所有.wrapAll()元素包裹一个 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>

将结果包装在...每个元素中

<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”&gt;
<p>This is a paragraph.</p>
</span>

<span class=”newclass”&gt;
<p>This is a paragraph.</p>
</span>

<span class=”newclass”&gt;
<p>This is a paragraph.</p>
</span>



Substitute the .wrap for .wrapAll.

$(‘p’).wrapAll(‘&lt;span class=”newclass” />’);

will result in:

<span class=”newclass”&gt;
<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(‘&lt;span class=”newclass” />’);

will result in:

<p><span class=”newclass”&gt;This is a paragraph.</span></p>
<p><span class=”newclass”&gt;This is a paragraph.</span></p>
<p><span class=”newclass”&gt;This is a paragraph.</span></p>