.wrapAll()
원문 링크 
http://api.jquery.com/wrapAll/
함수들
개요 : Wrap an HTML structure around all elements in the set of matched elements.조건에 일치하는 요소들의 HTML 구조를 감쌉니다.
- .wrapAll( wrappingElement )
- wrappingElement 요소들을 감쌀 HTML 조각, 선택자 표현, jQuery 객체, DOM 요소
.wrapAll() 함수는 $()형식으로 쓰는 함수에서 나온 문자열 또는 객체로 감쌀 수 있습니다. 이 깊은 수준까지 중첩될 수 있습니다.
HTML을 기준으로:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
.wrapAll()으로 inner 클래스를 가진 <div>를 새로운 div로 감싸려면:
$('.inner').wrapAll('<div class="new" />'); new <div> 요소는 DOM에 추가됩니다. 결과적으로 각 div를 new <div>로 감싸게 되는겁니다.
<div class="container">
<div class="new">
<div class="inner">Hello</div>
<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").wrapAll("<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").wrapAll("<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").wrapAll(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").wrapAll($(".doublediv"));</script>
</body>
</html>
미리보기
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 클릭 이벤트, click() (0) | 2011.11.25 |
|---|---|
| jQuery API 정복 - 변경 이벤트, change() (0) | 2011.11.24 |
| jQuery API 정복 - 포커스 잃을 때 이벤트, blur() (1) | 2011.11.24 |
| jQuery API 정복 - 이벤트 연결하기, bind() (6) | 2011.11.23 |
| jQuery API 정복 - 넓이 구하기, width() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 감싸기, wrap() (0) | 2011.11.22 |
| jQuery API 정복 - 감싼 요소 제거하기, unwrap() (0) | 2011.11.22 |
| jQuery API 정복 - class 토글하기, toggleClass() (0) | 2011.11.22 |