jQuery 공작소 : .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="https://t1.daumcdn.net/cfile/tistory/2179074B550B9B360C" onclick="j_test(this)" />
<img src="https://t1.daumcdn.net/cfile/tistory/223CC93854D74C4E32" onclick="j_test(this)" />
<img src="https://t1.daumcdn.net/cfile/tistory/2574603354D74FB429" onclick="j_test(this)" />
</div>
<script type="text/javascript">
function j_test(o){
$(o).wrap('<div></div>');
}
</script>
.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="https://t1.daumcdn.net/cfile/tistory/2179074B550B9B360C" onclick="j_test(this)" />
<img src="https://t1.daumcdn.net/cfile/tistory/223CC93854D74C4E32" onclick="j_test(this)" />
<img src="https://t1.daumcdn.net/cfile/tistory/2574603354D74FB429" 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="https://t1.daumcdn.net/cfile/tistory/210A014854D735142C" onclick="j_test(this)" />
<img src="https://t1.daumcdn.net/cfile/tistory/211F9841555AC4FE24" onclick="j_test(this)" />
</div>
<script type="text/javascript">
function j_test(o){
$(o).wrap( $('.css_test div') );
}
</script>
.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="https://t1.daumcdn.net/cfile/tistory/210A014854D735142C" onclick="j_test(this)" />
<img src="https://t1.daumcdn.net/cfile/tistory/211F9841555AC4FE24" 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/