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

最新推荐文章于 2021-10-11 17:35:46 发布

weixin_30735745

最新推荐文章于 2021-10-11 17:35:46 发布

阅读量336

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yangguoe/p/9682489.html

版权

 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"  οnclick="">下移</span>
20     <span class="up"  οnclick="">上移</span>
21 
22 </div>
23 
24 <div class="item_li">
25     22222
26     <span class="down"  οnclick="">下移</span>
27     <span class="up"  οnclick="">上移</span>
28 
29 </div>
30 <div class="item_li">
31     33333
32     <span class="down"  οnclick="">下移</span>
33     <span class="up"  οnclick="">上移</span>
34 
35 </div>
36 <div class="item_li">
37     44444
38     <span  class="down"  οnclick="">下移</span>
39     <span class="up"  οnclick="">上移</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>

转载于:https://www.cnblogs.com/yangguoe/p/9682489.html

weixin_30735745

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫