Diferencia entre jQuery wrap y wrapAll

Question

¿Cuál es la diferencia entre jQuery .wrap y .wrapAll? Ellos prácticamente hacen lo mismo, pero ¿cuál podría ser la diferencia?

Answer 1

cuenta de la diferencia en las descripciones:

.wrap(): Envolver una estructura HTML alrededor cada elemento en el conjunto de elementos emparejados. .wrapAll(): Ajustar una estructura HTML alrededor de todos los elementos en el conjunto de elementos coincidentes.

.wrap() envuelve cada elemento de forma individual, pero .wrapAll() envuelve todos ellos como un grupo.

Por ejemplo:

<div class="foo"></div> 
<div class="foo"></div> 
<div class="foo"></div> 

Con $('.foo').wrap('<div class="bar" />');, esto sucede:

<div class="bar"><div class="foo"></div></div> 
<div class="bar"><div class="foo"></div></div> 
<div class="bar"><div class="foo"></div></div> 

Pero con $('.foo').wrapAll('<div class="bar" />');, esto sucede:

<div class="bar"> 
    <div class="foo"></div> 
    <div class="foo"></div> 
    <div class="foo"></div> 
</div> 

Answer 2

WrapAll envuelve todos los elementos, Wrap envuelve cada elemento .

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

Resultados de envolver TODAS interno-divs en una nueva div

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

resultados Wrap en ... CADA elemento

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