1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 9 <title>JQUYER改变DOM的上下顺序</title> 10 <style> 11 .item_li{padding-left:10px; height:40px; line-height:40px; border:1px solid; margin-bottom:10px;} 12 .down { cursor:pointer;} 13 .up { cursor:pointer;} 14 </style> 15 </head> 16 <body> 17 <div class="item_li"> 18 11111 19 <span class="down" onclick="">下移</span> 20 <span class="up" onclick="">上移</span> 21 22 </div> 23 24 <div class="item_li"> 25 22222 26 <span class="down" onclick="">下移</span> 27 <span class="up" onclick="">上移</span> 28 29 </div> 30 <div class="item_li"> 31 33333 32 <span class="down" onclick="">下移</span> 33 <span class="up" onclick="">上移</span> 34 35 </div> 36 <div class="item_li"> 37 44444 38 <span class="down" onclick="">下移</span> 39 <span class="up" onclick="">上移</span> 40 41 </div> 42 </body> 43 <script> 44 $(function () { 45 // 向下移动： 46 $('.dowm').on('click',function(){ 47 var partentsDiv = $(this).parents('.item_li') 48 var next = partentsDiv.next(); 49 if(next.html() !== undefined){ 50 next.fadeOut('slow',function(){ 51 $(this).after(partentsDiv); 52 }).fadeIn() 53 }else{ 54 alert('到底了') 55 } 56 }) 57 // 向上移动： 58 $('.up').on('click',function () { 59 var parentDiv = $(this).parents('.item_li'); 60 var prev = parentDiv.prev() 61 if(prev.html() !== undefined){ 62 prev.fadeOut('slow',function () { 63 $(this).before(parentDiv) 64 }).fadeIn() 65 } 66 67 }) 68 }) 69 </script> 70 </html>