[jQuery] jQuery(제이쿼리) 선택한 요소 감싸기 - .wrap() 함수

 

 

자바스크립트의 제이쿼리(jQuery)를 사용하여 선택한 요소나 그의 따른 요소를 감싸기가 가능한 함수가 있습니다.

선택한 요소를 원하는 태그로 감싸기를 할 때 대상 요소나 대상 요소의 하위 요소, 대상 요소의 전부를 감싸기를 할 수 있습니다.

 

jquery(제이쿼리)의 .wrap() 함수

jQuery(제이쿼리)의 .wrap() 함수는 선택한 요소에 새로운 태그로 감싸는 함수입니다.

.wrap() 함수는 $() 형식으로 사용되는 함수에서 나오는 문자열 또는 객체로도 감싸기를 할 수 있습니다.

//함수 사용방법 
$(select).wrap(wrappingElement); 

// wrappingElement 요소들을 감싸는 요소 
$(select).wrap( function() );

//p 요소를 div 태그로 감싸기 
$( 'p' ).wrap( '<div></div>' );

 

jquery(제이쿼리)의 .unwrap() 함수

jQuery(제이쿼리)의 .unwrap() 함수는 DOM에서 일치하는 요소들의 부모 요소들을 삭제합니다.

.wrap() 함수와 반대적인 성향을 지니고 있으며 요소의 부모들을 삭제하는 함수입니다.

//함수 사용방법 
$(select).unwrap(); 
$(select).unwrap(selecter); // 선택자 부모 요소들을 제거

//div 요소의 바로 상위의 태그를 삭제 
$( 'div' ).unwrap();

 

jquery(제이쿼리)의 .wrapInner() 함수

jQuery(제이쿼리)의 .wrapInner() 함수는 대상 요소의 하위 요소를 전부 감싸는 함수입니다.

//함수 사용방법 
$(select).wrapInner(wrappingElement); // wrappingElement 요소의 하위요소를 모두 감싸기

//p 모든 태그에 <div> 로 감싸기 
$('p').wrapInner('<div></div>'); 
<p>Hello</p> 
<p>World</p> 


=======결과======== 
<p><div>Hello</div></p> 
<p><div>World</div></p>

 

jquery(제이쿼리)의 .wrapAll() 함수

jQuery(제이쿼리)의 .wrapAll() 함수는 대상 요소들을 모두 한꺼번에 새로운 태그로 감싸는 함수입니다.

//함수 사용방법 
$(select).wrapAll(wrappingElement); // wrappingElement 요소들을 모두 한꺼번에 감싸기

//test Class를 가진 <div>를 새로운 <div class="new"> 로 감싸기 
$('.test').wrapAll('<div class="new" />');