728x90
반응형
1. body
클릭하면 해당 요소에만 .box의 css가 적용되도록 한다.
<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>1</pre>
<pre>2</pre>
<pre>3</pre>
<pre>4</pre>
<pre>5</pre>
</body>
2. script
<style type="text/css">
.box{border:2px solid red;}
#menu{background: pink; text-align: right;}
a{text-decoration: none; font-size: 20px;}
#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(){ // sub_menu 클래스 안에 각각 하나씩을 꺼내온다(clicked와 상관 없음)
if($(this).parent().is(".box")){
$(this).unwrap(".box");
}
});
$(this).wrap($box); //click한 애
});
$("a").wrapInner("<span></span>"); //a태그 안에 있는 것을 다 span으로 감싸준다.
$("pre").wrapAll("<b></b>"); //해당 태그들 전체를 바깥에서 감싸준다.
});
</script>728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]ajax_01 (0) | 2020.08.05 |
|---|---|
| [JQ]delete (0) | 2020.08.05 |
| [JQ]외부삽입 (0) | 2020.08.04 |
| [JQ]setInterval() (0) | 2020.08.04 |
| [JQ]내부삽입 (0) | 2020.08.03 |
