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