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包裝所有元件，環繞包裹每個元素。

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

結果在...... EACH元素包裹在一個新的div ALL內的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」> 
<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>