.wrap()
원문 링크 
http://api.jquery.com/wrap/
함수들
개요 : 조건에 일치하는 요소들의 HTML 구조를 감쌉니다.
- .wrap( wrappingElement )
- wrappingElement 요소들을 감쌀 HTML 조각, 선택자 표현, jQuery 객체, DOM 요소
- .wrap( function(index) )
- function(index) HTML 컨텐츠 또는 jQuery 객체를 반환하는 콜백 함수. 인자는 요소집합의 인덱스. 함수내의 this는 요소집합의 현재 요소를 의미합니다.
.wrap() 함수는 $()형식으로 쓰는 함수에서 나온 문자열 또는 객체로 감쌀 수 있습니다. 이 깊은 수준까지 중첩될 수 있습니다.
HTML을 기준으로:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
.wrap()으로 inner 클래스를 가진 <div>를 새로운 div로 감싸려면:
$('.inner').wrap('<div class="new" />'); new <div> 요소는 DOM에 추가됩니다. 결과적으로 각 div를 new <div>로 감싸게 되는겁니다.
<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>이 함수 사용의 두번째 방법은 인자로 콜백 함수를 사용하는 것입니다. 이 콜백 함수는 모든 요소를 위해 한번만 호출됩니다. 함수는 DOM element, jQuery object, HTML 조각들을 반환합니다.
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});결과는 아래와 같이 됩니다.
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>예 제
모든 문단을 새로운 div로 감싸볼까요.
<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").wrap("<div></div>");</script>
</body>
</html>미리보기
예 제
Wraps a newly created tree of objects around the spans. Notice anything in between the spans gets left out like the <strong> (red text) in this example. Even the white space between spans is left out. Click View Source to see the original html. <- 한마디로 span태그들을 새로 감싸보시죠. ^^;;;
<!DOCTYPE html>
<html>
<head>
<style>
div { border:2px blue solid; margin:2px; padding:2px; }
p { background:yellow; margin:2px; padding:2px; }
strong { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span>Span Text</span>
<strong>What about me?</strong>
<span>Another One</span>
<script>$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");</script>
</body>
</html>
미리보기
예 제
문단(p)을 새로운 div를 만들어서 감싸보죠.
<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").wrap(document.createElement("div"));</script>
</body>
</html>
미리보기
예 제
문서 상에 있는 요소를 선택해서 감싸는 용도로 사용해 보죠.
<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; margin:2px; padding:2px; }
.doublediv { border-color:red; }
p { background:yellow; margin:4px; font-size:14px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<div class="doublediv"><div></div></div>
<script>$("p").wrap($(".doublediv"));</script>
</body>
</html>
미리보기
장황하게 길게 설명하고 있는데, 실용적일지는 갸우뚱합니다. 이런 부분 할때 좀 해야하나 그런 생각이 들어요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 포커스 잃을 때 이벤트, blur() (1) | 2011.11.24 |
|---|---|
| jQuery API 정복 - 이벤트 연결하기, bind() (6) | 2011.11.23 |
| jQuery API 정복 - 요소 별로 감싸기, wrapAll() (0) | 2011.11.22 |
| jQuery API 정복 - 넓이 구하기, width() (0) | 2011.11.22 |
| jQuery API 정복 - 감싼 요소 제거하기, unwrap() (0) | 2011.11.22 |
| jQuery API 정복 - class 토글하기, toggleClass() (0) | 2011.11.22 |
| jQuery API 정복 - 텍스트만 알아내기, text() (5) | 2011.11.22 |
| jQuery API 정복 - 수직 스크롤 이동, scrollTop() (2) | 2011.11.22 |