wrap 메서드
wrap 메서드는
요소를 지정한 태그로 감쌉니다.
구문
메서드의 매개변수는 텍스트(태그 포함 가능), DOM 요소 또는 jQuery 객체가 될 수 있습니다:
.wrap(text or tag);
다음은 선택된 요소들을 사용자 정의 함수가 반환하는 내용으로 감싸는 방법입니다. 함수는 각 선택된 요소에 대해 개별적으로 호출되며, 매개변수로 요소의 집합 내 위치를 받습니다:
.wrap(function(집합 내 번호));
예시
www 클래스를 가진 모든 단락을
div 태그로 감싸 보겠습니다:
<p class="www">텍스트</p>
<p class="www">텍스트</p>
<p class="www">텍스트</p>
<p>텍스트</p>
$('.www').wrap(document.createElement('div'));
HTML 코드는 다음과 같이 바뀝니다:
<div><p class="www">텍스트</p></div>
<div><p class="www">텍스트</p></div>
<div><p class="www">텍스트</p></div>
<p>텍스트</p>
예시
매개변수로는 태그 이름뿐만 아니라 다음과 같은 구조도 전달할 수 있습니다:
<p class="www">텍스트</p>
<p class="www">텍스트</p>
<p class="www">텍스트</p>
<p>텍스트</p>
$('.www').wrap('<div></div>');
HTML 코드는 다음과 같이 바뀝니다:
<div><p class="www">텍스트</p></div>
<div><p class="www">텍스트</p></div>
<div><p class="www">텍스트</p></div>
<p>텍스트</p>
예시
여는 태그에는 어떠한 속성도 쓸 수 있으며,
이 속성들과 함께 요소가 감싸집니다.
www 클래스를 가진 단락을
zzz 클래스를 가진 div로 감싸 보겠습니다:
<p class="www">텍스트</p>
<p class="www">텍스트</p>
<p class="www">텍스트</p>
<p>텍스트</p>
$('.www').wrap('<div class="zzz"></div>');
HTML 코드는 다음과 같이 바뀝니다:
<div class="zzz"><p class="www">텍스트</p></div>
<div class="zzz"><p class="www">텍스트</p></div>
<div class="zzz"><p class="www">텍스트</p></div>
<p>텍스트</p>
