jQuery 공작소 : .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="https://t1.daumcdn.net/cfile/tistory/2408093354D74FB106" />
    <img src="https://t1.daumcdn.net/cfile/tistory/2701603954D74FB617" />
    <img src="https://t1.daumcdn.net/cfile/tistory/2275BF38550B92383D" />
    <img src="https://t1.daumcdn.net/cfile/tistory/2570B33354D74FB12F" />
</div>

관련 CSS

borderborder-radiusmarginwidth

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="https://t1.daumcdn.net/cfile/tistory/2227B74F54D7351631" />
    <img src="https://t1.daumcdn.net/cfile/tistory/25469641555AC5000B" />
    <img src="https://t1.daumcdn.net/cfile/tistory/2573FA3354D74FB128" />
    <img src="https://t1.daumcdn.net/cfile/tistory/21385A4C550B9B3D10" />
</div>

관련 CSS

borderborder-radiusmarginwidth

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="https://t1.daumcdn.net/cfile/tistory/2338433D552F50A40F" onclick="j_test(this)" />
    <img src="https://t1.daumcdn.net/cfile/tistory/27210A38555ABF4229" onclick="j_test(this)" />
</div>

관련 CSS

backgroundborderborder-radiusmarginpaddingwidth

jQuery

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

+ 관련 jQuery +

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

☞ 목록으로 가기