.wrap()

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

wrap 메서드는 지정한 요소로 셀렉터에 해당하는 것을 감쌉니다.

+_+
예제 1
기본 예제 - 클릭한 사진 div 태그로 둘러싸기
보기
사진을 클릭해 보세요~!

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

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

<div class="css_test">
    <img src="http://cfile9.uf.tistory.com/image/25150D38550B923D321E76" onclick="j_test(this)" />
    <img src="http://cfile8.uf.tistory.com/image/22558F38555ABF44057A91" onclick="j_test(this)" />
    <img src="http://cfile8.uf.tistory.com/image/213D5338550B92391D284F" onclick="j_test(this)" />
</div>

<script type="text/javascript">
    function j_test(o){
        $(o).wrap('<div></div>');
    }
</script>
관련 CSS
jQuery

- 클릭한 이미지를 div 로 감싸는 예제입니다. div 는 CSS 가 적용되어 테두리가 보입니다.

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

예제 2
기존 요소를 가져와서 그것으로 감싸기
보기
사진을 클릭해 보세요~!
회색 빈 네모칸을 이용해서 사진을 감쌉니다.

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

사진을 클릭해 보세요~!<br>
회색 빈 네모칸을 이용해서 사진을 감쌉니다.<br><br>

<div class="css_test">
    <div></div>
    <img src="http://cfile8.uf.tistory.com/image/26428A38550B92391B3212" onclick="j_test(this)" />
    <img src="http://cfile23.uf.tistory.com/image/23285B4D55AC84AD335475" onclick="j_test(this)" />
</div>

<script type="text/javascript">
    function j_test(o){
        $(o).wrap( $('.css_test div') );
    }
</script>
관련 CSS
jQuery

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

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