2012-08-14 3 views
15

jQuery .wrap과 .wrapAll의 차이점은 무엇입니까? 그들은 거의 같은 일을하지만, 차이점은 무엇입니까?jQuery 랩과 wrapAll의 차이점

+3

당신이 경우 쓰기에 충분히 똑똑하고, 당신은 아마 똑똑해 읽을 만합니다. 여기에 당신이 간다 : http://api.jquery.com/wrap/ http://api.jquery.com/wrapAll/ – ahren

+0

그냥 오히려 날카로운 –

답변

30

공지 설명의 차이 :

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

WrapAll이 모든 요소를 ​​랩은 랩 각 요소를 래핑 . 에 ... 요소 하나 개의 새로운 사업부의 모든 내부-div의

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

랩 결과를 포장에서

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

결과

<div class="container"> 
    <div class="new"> 
    <div class="inner">Hello</div> 
    </div> 
    <div class="new"> 
    <div class="inner">Goodbye</div> 
    </div> 
</div> 
0
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>