<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>jQuery - Moving elements Up and Down</title><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><style type="text/css"> div:first-of-type div.up { visibility: hidden; clear:both; } div:last-of-type div.down { visibility: hidden; } div.main { clear:both; } .up { float: left; } .down { float: left; }</style><script type="text/javascript"> $(document).ready(function() { $('.up').click(function() { var parent = $(this).parent(); parent.insertBefore(parent.prev()); }); $('.down').click(function() { var parent = $(this).parent(); parent.insertAfter(parent.next()); }); });</script></head><body> <h2>Click on the up and down arrows to move the rows</h2> <div class="main"> <div class="up"> </div> <div class="down"> </div> First Element </div> <div class="main"> <div class="up"> </div> <div class="down"> </div> Second Element </div> <div class="main"> <div class="up"> </div> <div class="down"> </div> Third Element </div> <div class="main"> <div class="up"> </div> <div class="down"> </div> Fourth Element </div> <div class="main"> <div class="up"> </div> <div class="down"> </div> Fifth Element </div></body></html>
