728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{border: 2px solid red;}
#menu{background-color: skyblue; text-align: right;}
a{text-decoration: none; font-size: 20pt;}
#menu div{display: inline-block; margin-right: 10px;}
</style>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $box = $("<div>").addClass("box");
$(".sub_menu:first").wrap($box);
$(".sub_menu").click(function(){
$(".sub_menu").each(function(){
if($(this).parent().is(".box")){
$(this).unwrap(".box");
}
});
$(this).wrap($box);
});
//a태그 안의 요소를 span으로 감싸자 라는 뜻
$("a").wrapInner("<span></span>");
//pre태그 전체에 박스를 만듬
$("pre").wrapAll("<div class='box'></div>")
//pre를 하나하나 쪼개서 박스를 만듬
$("pre").wrap("<div class='box'></div>")
});
</script>
</head>
<body>
<div id="menu">
<div class="sub_menu">
<a href="#"><span>국비지원</span></a>
</div>
<div class="sub_menu">
<a href="#">훈련검색</a>
</div>
<div class="sub_menu">
<a href="#">기관검색</a>
</div>
<div class="sub_menu">
<a href="#">질문답변</a>
</div>
<div class="sub_menu">
<a href="#">과정후기</a>
</div>
</div>
<pre>a</pre>
<pre>b</pre>
<pre>c</pre>
<pre>d</pre>
<pre>e</pre>
</body>
</html>
var $box = $("<div>").addClass("box");
$(".sub_menu:first").wrap($box);
$(".sub_menu").click(function(){
$(".sub_menu").each(function(){
if($(this).parent().is(".box")){
$(this).unwrap(".box");
}
});
$(this).wrap($box);
});
페이지가 시작되면 sub_menu class중 가장 첫번째에 box class를 만듭니다.
다른 class를 클릭하면 해당 클래스에 빨간 박스가 생깁니다.
그리고 클릭된 영역 이외에 있던 빨간 박스는 unwrqp()로 인해 사라집니다.
wrap() 메서드의 각 역할을 보기 위해 만들어보았습니다.
$("a").wrapInner("<span></span>");
a태그 안의 요소를 span으로 감싸자 라는 뜻
$("pre").wrapAll("<div class='box'></div>")
pre태그 전체에 박스를 만듬
$("pre").wrap("<div class='box'></div>")
pre를 하나하나 쪼개서 박스를 만듬
728x90
'JS 관련 > JQuery' 카테고리의 다른 글
[jQuery] 엘리먼트 제거( remove(), empty(), detach() ) (0) | 2022.02.27 |
---|---|
[jQuery] 외부 삽입 메서드( after(), insertAfter(), before(), insertBefore() ) (0) | 2022.02.25 |
[jQuery] append()와 toggleClass() (0) | 2022.02.24 |
[jQuery] prepend(), append() (0) | 2022.02.23 |
[jQuery] replaceWith(), replaceAll() (0) | 2022.02.22 |