도도의 IT이야기
[jQuery]wrap, unwrap,wrapAll 본문
우선 이러한 HTML코드가 있다고 해봅시다
<head>
<style>
wrapper{
width:900px;
margin:auto 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li>someThing1</li>
<li>som</li>
</ul>
<ul>
<li>any</li>
<li>thing</li>
</ul>
</div>
</body>보이는 대로 ul 태그들이 div.wrapper에 wrap되있습니다.
wrapper는 안에있는 element들의 width를 900px로 줄이고 화면 중간에 합니다.
우리 한번 이 wrapper을 없애 봅시다.
$('ul').unwrap();쉽죠? unwrap은 자신의 직속 parent를 없애버리는 역활을 합니다.
wrapper를 없앴기 때문에 이제 더이상 width 가 900px이 아닐겁니다.
이제 없앤것을 다시 돌려보죠
let value = "<div class="wrapper">"
$('ul').wrap(value);이런식으로 더하는게 맞을까요? 약간 틑립니다만 그전에 이코드를 설명하죠.
wrap의 인자에 closing tag를 더해줄 필요가 없습니다 opening tag만 넣어도 되죠.
그리고 wrap은 ul이 3개있으면 3개 각각 parent를 wrap해줍니다.
하지만 우리가 하고 싶은 것을 wrap을 각각 더하는게 아니죠?
그래서 모든 ul element를 wrap하는 방법이 있습니다.
바루 wrapAll()이죠.
위 코드를 wrapAll(value)로 바꾸면 우리가 원하는 결과가 나옵니다.
'IT > 자바스크립트' 카테고리의 다른 글
| [jQuery] CSS/class 바꾸는 방법 (0) | 2020.05.12 |
|---|---|
| [jQuery] 콘텐트 제거 그리고 attribute 바꾸기 (0) | 2020.05.12 |
| [jQuery] html에 element를 더하고 바꾸는 방법 (0) | 2020.05.12 |
| [jQuery] jquery chaining (0) | 2020.05.11 |
| [jQuery] DOM을 탐험하는 방법 (0) | 2020.05.11 |