jQuery에서 여러 요소를 감싸기

찾은 모든 요소를 각각 따로 감싸는 것이 아니라, wrapAll 메서드를 사용하여 함께 감쌀 수 있습니다.

HTML 코드에는 여러 개의 단락이 있습니다:

html<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

클래스가 www인 모든 단락을 찾아 하나의 div 태그로 감싸 보겠습니다:

javascript$('.www').wrapAll('<div></div>');

HTML 코드는 다음과 같이 바뀝니다:

html<div>
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
</div>
<p>text</p>

감싸는 요소들이 서로 인접해 있지 않다면, wrapAll 메서드는 먼저 요소들을 한 곳으로 이동시킨 다음 감싸는 점에 유의하세요. 다음 예시를 보세요:

html<p class="www">text1</p>
<p class="www">text2</p>
<p>text</p>
<p class="www">text3</p>

wrapAll 메서드를 적용합니다:

javascript$('.www').wrapAll('<div></div>');

결과적으로 다음과 같은 HTML 코드를 얻습니다:

html<div>
  <p class="www">text1</p>
  <p class="www">text2</p>
  <p class="www">text3</p>
</div>
<p>text</p>

요소 감싸기 메서드는 또한 각 요소 세트에 함수를 적용하는 기능을 제공합니다.