<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport"

           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

     <title>JQUYER改变DOM的上下顺序</title>

     <style>

         .item_li{padding-left:10px; height:40px; line-height:40px; border:1px solid; margin-bottom:10px;}

         .down { cursor:pointer;}

         .up { cursor:pointer;}

     </style>

 </head>

 <body>

 <div class="item_li">

     11111

     <span class="down"  onclick="">下移</span>

     <span class="up"  onclick="">上移</span>

 </div>

 <div class="item_li">

     22222

     <span class="down"  onclick="">下移</span>

     <span class="up"  onclick="">上移</span>

 </div>

 <div class="item_li">

     33333

     <span class="down"  onclick="">下移</span>

     <span class="up"  onclick="">上移</span>

 </div>

 <div class="item_li">

     44444

     <span  class="down"  onclick="">下移</span>

     <span class="up"  onclick="">上移</span>

 </div>

 </body>

 <script>

     $(function () {

         // 向下移动：

         $('.dowm').on('click',function(){

             var partentsDiv = $(this).parents('.item_li')

             var next = partentsDiv.next();

             if(next.html() !== undefined){

                 next.fadeOut('slow',function(){

                     $(this).after(partentsDiv);

                 }).fadeIn()

             }else{

                 alert('到底了')

             }

         })

         // 向上移动：

         $('.up').on('click',function () {

             var parentDiv = $(this).parents('.item_li');

             var prev = parentDiv.prev()

             if(prev.html() !== undefined){

                 prev.fadeOut('slow',function () {

                     $(this).before(parentDiv)

                 }).fadeIn()

             }

         })

     })

 </script>

 </html>

jquery改变元素上下排列的顺序的更多相关文章

  1. selenium用jquery改变元素属性

    一.jQuery 语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 1.基础语法: $(selector).action() 选择符(selector)即," ...

  2. jquery改变元素的值的函数text()，html()，val()

    text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值,适合于标签中有value属性的标签. 代码: ...

  3. 巧妙使用Jquery 改变元素的 onclick 事件

    需要点击图片将套组发布, 页面代码: <img width="20px" src=" <s:property value="IMAGES_PATH& ...

  4. jQuery改变元素class属性

    //去掉class属性 $(this).parent('li').removeClass("prev_selected"); //去掉同兄弟的class属性. $(this).pa ...

  5. jquery 改变标签样式

    jQuery改变标签的样式一般有3种 预置好class,然后通过jQuery改变元素的class名,使用的是addClass.removeClass 直接改变元素的css属性值,这种是通过添加styl ...

  6. jQuery拖拽改变元素大小

    一个非常简单的例子,体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/29.htm 以下是完整代码,保存到HTML文件打开也可以体验效果. <!DOCTY ...

  7. jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

    今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...

  8. jquery插件之拖拽改变元素大小

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...

  9. justify-content 定义子元素在父元素水平位置排列的顺序

    justify-content 定义子元素在父元素水平位置排列的顺序,需要和display:flex使用才会生效. 有五个属性: 1.flex-start(默认值)  左对齐 2.flex-end 右 ...

随机推荐

  1. ubuntu下安装迅雷thunder

    迅雷是windows xp下必装的下载工具,作为一款跨协议的下载软件,迅雷的下载速度极其强悍. 那么在ubuntu下能否安装迅雷呢? 到ubuntu中文论坛逛了一圈,发现有现成的wine-thunde ...

  2. 【DeepLearning】Exercise:Softmax Regression

    Exercise:Softmax Regression 习题的链接:Exercise:Softmax Regression softmaxCost.m function [cost, grad] = ...

  3. [转]2016年linux运维人员必会开源运维工具体系

    linux运维人员必会开源运维工具体系 说明:不同的技术人员,不同的阶段确定知识边界非常重要,否则,就像马拉车,不知道终点在哪,累死也达不到目标.例如拿8K要学多少,拿15K要学多少.一个新手也许只想 ...

  4. 1503: [NOI2004]郁闷的出纳员 （SBT）

    1503: [NOI2004]郁闷的出纳员 http://www.lydsy.com/JudgeOnline/problem.php?id=1503 Time Limit: 5 Sec  Memory ...

  5. 【struts2】自定义登录检查拦截器

    在实际开发中,一个常见的功能要求是:有很多操作都需要登录后才能操作,如果操作的时候还没有登录,那么通常情况下会要求跳转回到登录页面. 1)如何实现这样的功能呢? 在具体实现之前,先来考虑几个问题: ( ...

  6. easyui combobox 动态加载的两种方法

    reload 方法 javascript代码 //指定id 和 text 否则始终选择第一个 $('#contact_city').combobox({ valueField:'id', textFi ...

  7. fork()和写时复制

    写时复制技术最初产生于Unix系统,用于实现一种傻瓜式的进程创建:当发出fork(  )系统调用时,内核原样复制父进程的整个地址空间并把复制的那一份分配给子进程.这种行为是非常耗时的,因为它需要: · ...

  8. Java NIO.2 —— 文件或目录拷贝操作

    拷贝整个文件树是可以递归每个目录和文件调用 Files.copy()方法.在使用的时候有一下注意事项. 在往目录拷贝文件之前,首先要保证目录已经存在.拷贝源目录(不论是否为空)都会生成目标目录.整个任 ...

  9. 第2章 Python基础-字符编码&数据类型 列表&元祖 练习题

    1.创建一个空列表,命名为names,往里面添加old_driver,rain,jack,shanshan,peiqi,black_girl元素 names = ["old_driver&q ...

  10. [转]什么是C++虚函数、虚函数的作用和使用方法

    我们知道,在同一类中是不能定义两个名字相同.参数个数和类型都相同的函数的,否则就是“重复定义”.但是在类的继承层次结构中,在不同的层次中可以出现名字相同.参数个数和类型都相同而功能不同的函数.例如在例 ...