jQuery wrap ve wrapAll arasındaki fark

Question

jQuery .wrap ve .wrapAll arasındaki fark nedir? Onlar da aynı şeyi yapıyorlar, ama fark ne olabilir?

Answer 1

Bildirim açıklamalarında farkı:

.wrap(): eşleşti elemanların sette etrafında her eleman bir HTML yapısını sarın. .wrapAll(): Eşleşen öğeler kümesindeki HTML yapısını tüm öğelerini sarın.

.wrap() tamamladı bireysel olarak her eleman, ancak bir grup olarak .wrapAll() tamamladı hepsi.

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

$('.foo').wrap('<div class="bar" />'); ile bu olur: Örneğin

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

Ama $('.foo').wrapAll('<div class="bar" />'); ile bu gerçekleşir:

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

Answer 2

WrapAll TÜM unsurları sarar, Wrap HER elemanı sarar . içinde ... HER eleman bir yeni div TÜM içi div'ler

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

Wrap sonuçları sarma içinde

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

Sonuçlar

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