<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习 上移</title>
    <style>
      *{
margin:0;
padding:0;
list-style: none;
}
ul{
width:350px;
margin:100px auto;
}
li{
margin-bottom:3px;
}
input{
width:150px;
height: 30px;
border:0 none;
background: #ccc;
cursor: pointer;
}


    </style>
     <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<ul>
<li>1. <input type="button" value="上移" /> <input type="button" value="下移" /></li>
<li>2. <input type="button" value="上移" /> <input type="button" value="下移" /></li>
<li>3. <input type="button" value="上移" /> <input type="button" value="下移" /></li>
<li>4. <input type="button" value="上移" /> <input type="button" value="下移" /></li>
<li>5. <input type="button" value="上移" /> <input type="button" value="下移" /></li>
</ul>


    <script>
$(document).ready(function(e) {
    //单击上移
$("input[value='上移']").click(function(){
console.log("click"+$(this).parent().index());
//判断是否到顶
if($(this).parent().index()==0){
alert ("top");
return;
}
console.log("continue");
//移动元素
$(this).parent().prev().before($(this).parent());
});
//单击下移
$("input[value='下移']").click(function(){
console.log("click"+$(this).parent().index());
//判断是否到底
if($(this).parent().index()==4){
alert ("bottom");
return;
}
//移动元素
$(this).parent().next().after($(this).parent());
});
        });
    </script>
</body>
</html>