17

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

4

3 回答 3

32

注意描述的不同：

.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>
于 2012-08-14T05:47:32.607 回答
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>
于 2012-08-14T05:48:52.437 回答
0 
Adding jquery to execute a wrap:

$(‘p’).wrap(‘&lt;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>
于 2017-06-20T15:52:58.263 回答