48. jquery Method [ .wrapAll() ] - 선택한 요소 모두를 새로운 태그로 감사는 메소드
2020. 2. 26. 17:35
48. jquery Method [ .wrapAll() ] - 선택한 요소 모두를 새로운 태그로 감사는 메소드
jquery wrapAll() 메소드에 대해 알아봅니다.
문법
.wrapAll()
예를 들어
$("p").wrapAll("<div></div>");
p태그들을 모아서 div태그로 감쌉니다.
예제 코드
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Home</title>
<style type="text/css">
div {
border: 1px solid #dddddd;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("p").wrapAll("<div></div>");
});
</script>
<body>
<p>MelonPeach1</p>
<h1>MelonPeach</h1>
<p>MelonPeach2</p>
</body>
</html>
실행 테스트
.wrapAll(wrappingElement) : Wrap an HTML structure around all elements in the set of matched elements.
조건에 일치하는 요소들의 HTML 구조를 감쌉니다.
.wrapAll() 메소드는 $()형식으로 쓰는 함수에서 나온 문자열 또는 객체로 감쌀 수 있습니다.
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>\
.wrapAll() 으로 inner 클래스를 가진 <div>를 새로운 div로 감싸려고 한다면
$('.inner').wrapAll('<div class="new" />')
new <div> 요소는 DOM에 추가됩니다. 결과적으로 각 <div>를 new <div> 로 감싸게 되는겁니다.
<div class="container">
<div class="new">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
</div>
예를 들면
<!DOCTYPE html>
<html>
<head>
<style>
div { border: 2px solid blue; }
p { background:yellow; margin:4px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$("p").wrapAll("<div></div>");
</script>
</body>
</html>이 글을 공유합시다
