jQuery .wrap() Examples

Welcome To jQuery !!
+_+
Example 1
View
Click The Photo !!

Source
<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>

Click The Photo !!<br><br>

<div class="css_test">
    <img src="http://cfile2.uf.tistory.com/image/230D9C3454D7331920123C" onclick="j_test(this)" />
    <img src="http://cfile30.uf.tistory.com/image/21028950550B9B3E0BE601" onclick="j_test(this)" />
    <img src="http://cfile2.uf.tistory.com/image/2408473354D74FB606803F" onclick="j_test(this)" />
</div>

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

$( selector ).wrap( tags )

Example 2
Use elements
View
Click The Photos !!
The gray boxes are used.

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

Click The Photos !!<br>
The gray boxes are used.<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/225BA93954EA01760701E8" onclick="j_test(this)" />
</div>

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

$( selector ).wrap( $( '.css_test  div' ) )

jQuery .wrap() Documentation : http://api.jquery.com/wrap/