上下移动-欢迎拍砖 

<!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>

　　

posted @ 2017-06-30 15:15  小毛驴--  阅读(81)  评论(0)    收藏  举报