<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<title>JQUYER改变DOM的上下顺序</title>
<style>
.item_li{padding-left:10px; height:40px; line-height:40px; border:1px solid; margin-bottom:10px;}
.down { cursor:pointer;}
.up { cursor:pointer;}
</style>
</head>
<body>
<div class="item_li">
11111
<span class="down" onclick="">下移</span>
<span class="up" onclick="">上移</span>
</div>
<div class="item_li">
22222
<span class="down" onclick="">下移</span>
<span class="up" onclick="">上移</span>
</div>
<div class="item_li">
33333
<span class="down" onclick="">下移</span>
<span class="up" onclick="">上移</span>
</div>
<div class="item_li">
44444
<span class="down" onclick="">下移</span>
<span class="up" onclick="">上移</span>
</div>
</body>
<script>
$(function () {
// 向下移动：
$('.dowm').on('click',function(){
var partentsDiv = $(this).parents('.item_li')
var next = partentsDiv.next();
if(next.html() !== undefined){
next.fadeOut('slow',function(){
$(this).after(partentsDiv);
}).fadeIn()
}else{
alert('到底了')
}
})
// 向上移动：
$('.up').on('click',function () {
var parentDiv = $(this).parents('.item_li');
var prev = parentDiv.prev()
if(prev.html() !== undefined){
prev.fadeOut('slow',function () {
$(this).before(parentDiv)
}).fadeIn()
}
})
})
</script>
</html>
网友评论