jquery改变元素上下排列的顺序 

 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>

 

posted @ 2018-09-20 18:14  前端极客  阅读(1167)  评论(0)  编辑  收藏  举报