[jQuery] wrap(), wrapInner(), wrapAll()

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

'JS 관련 > JQuery' 카테고리의 다른 글

티스토리툴바