<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.12.1.js"></script>
<title>上移下移</title>
<style>
ul , h2 { padding:0; margin:0; }
li { list-style:none; }
#list{ margin-bottom: 10px; }
</style>
<script type="text/javascript">
// 上移
$(function(){
$('input#up').click(function(){
$(this).parents('#list').prev().before($(this).parents('#list'));
})
// 下移
$('input#down').click(function(){
$(this).parents('#list').next().after($(this).parents('#list'));
})
})
</script>
</head>
<body>
<div id="list">1.<input id="up" type="button" name="" value="上移"><input id="down" type="button" name="" value="下移"></div>
<div id="list">2.<input id="up" type="button" name="" value="上移"><input id="down" type="button" name="" value="下移"></div>
<div id="list">3.<input id="up" type="button" name="" value="上移"><input id="down" type="button" name="" value="下移"></div>
<div id="list">4.<input id="up" type="button" name="" value="上移"><input id="down" type="button" name="" value="下移"></div>
<div id="list">5.<input id="up" type="button" name="" value="上移"><input id="down" type="button" name="" value="下移"></div>
</body>
</html>