<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<ul class="demo">
<li>001
<a href="#" class="up">上移</a>
<a href="#" class="down">下移</a>
<a href="#" class="top">置顶</a>
<a href="#" class="bottom">置底</a>
<a href="#" class="delate">删除</a>
</li>
<li>002
<a href="#" class="up">上移</a>
<a href="#" class="down">下移</a>
<a href="#" class="top">置顶</a>
<a href="#" class="bottom">置底</a>
<a href="#" class="delate">删除</a>
</li>
<li>003
<a href="#" class="up">上移</a>
<a href="#" class="down">下移</a>
<a href="#" class="top">置顶</a>
<a href="#" class="bottom">置底</a>
<a href="#" class="delate">删除</a>
</li>
<li>004
<a href="#" class="up">上移</a>
<a href="#" class="down">下移</a>
<a href="#" class="top">置顶</a>
<a href="#" class="bottom">置底</a>
<a href="#" class="delate">删除</a>
</li>
</ul>
</body>
</html>
<script>
$(".demo").on('click', 'a', function (event) {
event.preventDefault;
var parent = $(this).parent();
var parents = $(this).parents(".demo");
var len = parents.children().length;
if (($(this).is(".up") || $(this).is(".top")) && parent.index() == 0) {
alert("已经置顶!");
return false;
} else if (($(this).is(".down") || $(this).is(".bottom")) && parent.index() == len - 1) {
alert("已经置底!");
return false;
}
switch (true) {
case $(this).is(".up"):
var prev = parent.prev();//取得同辈相邻前一个
//parent.insertBefore(prev);//把当前元素,放在前一个前边
prev.before(parent);
break;
case $(this).is(".down"):
var next = parent.next();
//parent.insertAfter(next);
next.after(parent);
break;
case $(this).is(".top"):
parents.prepend(parent);//把当前元素,放在最前边
break;
case $(this).is(".bottom"):
parents.append(parent);//内部结尾添加元素
break;
case $(this).is(".delate"):
parent.remove();//删除
break;
}
alert("操作完成!!");
});
</script>
<!-- <script>
$(".demo").on('click', 'a', function(event) {
// console.log(event);
var parent=$(this).parent();
var prev = parent.prev();
prev.before(parent);
console.log(parent)
})
</script> -->
jq做上移下移删除置顶
最新推荐文章于 2020-08-21 22:52:30 发布