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>