노드를 추가하고 해당 노드가 이미 존재한다면 이동할 수 있다.
해당 노드를 지칭하는 것은 this로 한다.
prepend() 맨 앞으로 이동
append() 맨 뒤로 이동
before() 기준 노드보다 앞으로 이동
after() 기준 노드보다 뒤로 이동
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>node move</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<script>
var count = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
$(document).ready(function () {
var $menu = $("ul.menu");
var $base = $("ul.menu li.select");
$("ul.menu li").click(function(){
// 맨 앞으로 이동
$menu.prepend(this);
// 맨 뒤로 이동
// $menu.append(this);
//기준 노드 앞으로 이동
// $base.before($(this));
// 기준 노드 뒤로 이동
// $base.after($(this));
});
});
</script>
</head>
<body>
<ul class="menu">
<li id="menu1">Menu#1</li>
<li id="menu2">Menu#2</li>
<li id="menu3" class="select">Menu#3(class = "select")</li>
<li id="menu4">Menu#4</li>
<li id="menu5">Menu#5</li>
</ul>
</body>
</html>
728x90
반응형
'HTML > jQuery 기초' 카테고리의 다른 글
| [jQuery] 노드 수정하기 (0) | 2020.08.04 |
|---|---|
| [jQuery] 노드 삭제하기 (0) | 2020.08.04 |
| [jQuery] 노드 추가하기 (0) | 2020.08.03 |
| [jQuery] 노드 실습 (0) | 2020.08.03 |
| [jQuery] 형제 노드 (0) | 2020.08.03 |
