.wrapAll()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

wrapAll 메서드는 셀렉터에 해당하는 요소를 묶어서 지정한 것으로 감쌉니다.
확실한 이해를 돕기위해 wrap 메서드와 비교해 보겠습니다. ^^

+_+
예제 1
기본 예제 - 이미지를 대상으로 해보기
보기
사진을 클릭해 보세요~!

소스
<style type="text/css">
    .css_test img {
        margin : 5px;
        width : 250px;
    }
    .css_test div {
        border-radius : 5px;
        border : 3px solid gray;
        margin : 5px;
    }
</style>

사진을 클릭해 보세요~!<br><br>

<button type="button" onclick="$('.css_test img').wrapAll('<div></div>')">사진 wrapAll() 하기</button>

<div class="css_test">
    <img src="http://cfile25.uf.tistory.com/image/21721038550B923C0491DE" />
    <img src="http://cfile9.uf.tistory.com/image/22743938550B9238039289" />
    <img src="http://cfile3.uf.tistory.com/image/232B204B550B9B39321644" />
    <img src="http://cfile9.uf.tistory.com/image/25150D38550B923D321E76" />
</div>
관련 CSS
jQuery

- 클릭한 이미지를 div 로 감싸는 예제입니다. 이미지를 하나의 대상으로 보고 감쌉니다.
- 이미지가 4개인데 각각처리하지 않고 묶어서 처리합니다.

$( 셀렉터 ).wrapAll( 태그 )  -  지정한 셀렉터 모두태그둘러쌉니다.
$( 'img' ).wrapAll( '<div></div>' )  -  img 태그 모두를 div 로 둘러쌉니다. 즉 div 태그안에 img 를 넣게 되는것이죠.

예제 2
만약 wrap 메소드로 한다면?
보기
버튼을 클릭해 보세요~!

소스
<style type="text/css">
    .css_test img {
        margin : 5px;
        width : 250px;
    }
    .css_test div {
        border-radius : 5px;
        border : 3px solid gray;
        margin : 5px;
    }
</style>

버튼을 클릭해 보세요~!<br><br>

<button type="button" onclick="$('.css_test img').wrap('<div></div>')">사진 wrap() 하기</button>

<div class="css_test">
    <img src="http://cfile8.uf.tistory.com/image/254C803854D74C4D169511" />
    <img src="http://cfile22.uf.tistory.com/image/24088C3354D74FB505499F" />
    <img src="http://cfile30.uf.tistory.com/image/23356241555AC4FC15699F" />
    <img src="http://cfile30.uf.tistory.com/image/2275BF38550B92383D4CA6" />
</div>
관련 CSS
jQuery
- 각각의 이미지가 개별적으로 적용되는것을 볼 수 있습니다.

참고 메서드 : .wrap()
예제 3
기존 요소를 가져와서 그것으로 감싸기
보기
버튼을 클릭해 보세요~!
회색 빈 네모칸을 이용해서 사진을 감쌉니다.

소스
<style type="text/css">
    .css_test img {
        margin : 5px;
        width : 250px;
    }
    .css_test div {
        background : #efefef;
        border-radius : 5px;
        border : 3px solid gray;
        margin : 5px;
        padding : 5px;
    }
</style>

버튼을 클릭해 보세요~!<br>
회색 빈 네모칸을 이용해서 사진을 감쌉니다.<br><br>
<button type="button" onclick="$('.css_test img').wrapAll('<div></div>')">사진 wrap() 하기</button>

<div class="css_test">
    <div></div>
    <img src="http://cfile28.uf.tistory.com/image/2341424F54D735170D2966" onclick="j_test(this)" />
    <img src="http://cfile8.uf.tistory.com/image/237A604354E7264B1411CE" onclick="j_test(this)" />
</div>
관련 CSS
jQuery

$( 셀렉터 ).wrapAll( $( '.css_test  div' ) )
- 클래스명이 css_test 인것의 div 를 이용해서 셀렉터에 해당하는 요소를 모두 감쌉니다.

+ 관련 jQuery +
jQuery 홈페이지 .wrapAll() API 문서 : http://api.jquery.com/wrapAll/