html文件代码：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <meta name="author" content="ini.iteye.com" />

 <title>jQuery反向排序(倒序)子对象</title>

 <style type="text/css">

 *{margin:0;padding:0;}

 body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}

 #layout{width:405px;margin:15px auto;}

 ul{list-style: none;float:left;margin:0 15px;}

 li{padding:5px 10px;width:100px;color:#fff;}

 </style>

 </head>

 <body>

 <div id="layout">

     <ul id="test"></ul>

     <ul>

         <div style="padding:110px 0;">==></div>

     </ul>

     <ul id="test2"></ul>

     <div style="clear:both;padding:20px;text-align:center;">

         <input type="button" id="btn" value="去掉(最后)一个，然后重新排序" />

         <input type="button" id="btn2" value="重置" />

     </div>

 </div>

 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>

 <script type="text/javascript">

 (function($) {

     $.extend({

         reverseChild : function(obj, child) {

             var childObj = $(obj).find(child);

             var total = childObj.length; 

             childObj.each(function(i) {

                 $(obj).append(childObj.eq((total-1)-i));

             }); 

             //console.log(childObj.html());

         }

     });

 })(jQuery);

 //生成测试对象

 function maskList() {

     var color = ["red", "green", "blue", "orange", "#AAC93E", "#27BFC1", "#2790EB", "#D139D1", "#BC5895", "#5FA0D3"];

     var html = '';

     for (var i=0; i<color.length; i++) {

         html += '<li style="background:'+color[i]+'">'+(i+1)+'</li>';

     }

     $("#test").html(html);

     $("#test2").html($("#test").html());

     $.reverseChild("#test2", 'li');

 }

 $(function() {

     maskList();

     $("#btn").click(function() {

         var total = $("#test li").length;

         if(total > 2) {

             $("#test li").last().remove();

             $("#test2").html($("#test").html());

             $.reverseChild("#test2", 'li');

         } else {

             alert("亲，留两个吧！");

         }

     });

     $("#btn2").click(maskList);

 });

 </script>

 </body>

 </html>

把代码保存到html文件，打开后可以测试效果。

jquery列表顺序倒转排序效果的更多相关文章

  1. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号，在Asp.net 获取不到的，解决办法 .Net程序员 初学Ubuntu ，配置Nignix 夜深了，写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

  2. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

  3. Rails-Treasure chest3 嵌套表单； Ransack（3900✨）用于模糊查询, ranked-model(800🌟)自订列表顺序; PaperTrail(5000✨)跟踪model's data，auditing and versioning.

    自订列表顺序, gem 'ranked-model' 多步骤表单 显示资料验证错误讯息 资料筛选和搜寻, gem 'ransack' (3900✨); 软删除和版本控制 数据汇出(csv), 自订列表 ...

  4. jQuery列表拖动排列-jquery list dragsort插件参数和使用方法

    在编写网页的时候,有时可能需要对ul的li进行排序,今天就给大家推荐使用jquery插件jquery list dragsort实现列表拖动排序效果. 效果如图: jquery list dragso ...

  5. 【转】jQuery列表拖动排列-jquery list dragsort插件参数和使用方法

    转自:http://www.itokit.com/2014/0820/75058.html 我们在编辑页面元素排序的时候,我推荐使用jquery插件:dragsort. dragsort官网地址:ht ...

  6. ListView列表拖拽排序

    ListView列表拖拽排序能够參考Android源代码下的Music播放列表,他是能够拖拽的,源代码在[packages/apps/Music下的TouchInterceptor.java下]. 首 ...

  7. 织梦list文章列表按权重排序

    织梦的文章列表按权重排序 DEDECMS(织梦)5.6系统支持文档权重weight排序,可以在模板中使用: {dede:arclist row='10' titlelen='50' orderby=' ...

  8. ClistCtrl用法及总结（由怎样隐藏ListCtrl列表头的排序小三角形这个bug学习到的知识）

    1 怎样隐藏ListCtrl列表头的排序小三角形 在创建控件是加入|LVS_NOSORTHEADER风格即可. 一下是用法总结: 本文根据本人在项目中的应用,来谈谈CListCtrl的部分用法及技巧. ...

  9. SNF软件开发机器人-子系统-功能-【列表】自由排序-如何配置？

    [列表]自由排序 1.效果展示: 2.使用说明: 打开显示页面,点击开发者选项的简单配置按钮.在功能表信息中选择自由排序复选框后保存.

随机推荐

  1. IO完成端口

    从MSDN中翻译了IO完成端口的文章,不得不说翻译的很烂,英语需要继续提高啊... 在一个多处理器系统上,IO完成端口提供一个非常高效的线程模型来处理多个异步IO请求.当一个进程创建了一个IO完成端口 ...

  2. 来看看Windows9到底是什么

    今天有新闻一直在说windows 8.2 windows9,还给出了一张很有趣的图 我们就假设这张图是真的. 这张图透漏出两个信息 其一:开始菜单真的回来了. 不过还是不死心,绝不放弃开始屏,确实,开 ...

  3. Senparc.Weixin.MP SDK 微信公众平台开发教程（十三）：地图相关接口说明

    为了方便大家开发LBS应用,SDK对常用计算公式,以及百度和谷歌的地图接口做了封装. 常用计算: 用于计算2个坐标点之间的直线距离:Senparc.Weixin.MP.Helpers.Distance ...

  4. RHCE 系列（九）：如何使用无客户端配置 Postfix

    转载于:http://www.itxuexiwang.com/a/liunxjishu/2016/0220/152.html?1456382561 尽管现在有很多在线联系方式,电子邮件仍然是一个人传递 ...

  5. MVVM架构~knockoutjs系列之一些异常的总结（永久更新）

    返回目录 1 关于attr属性的问题 这个问题主要出现的IE7和360浏览器,使用attr时,需要为属性名加上单引号,代码如下: <a data-bind="attr:{'href': ...

  6. atitit 短信验证码的源码实现  .docx

    atitit 短信验证码的源码实现  .docx 参考 Atitit usrQBM1603短信验证码规范1 主要方法1 源码实现1 参考 Atitit usrQBM1603短信验证码规范 主要方法 L ...

  7. fir.im Weekly - 如何做一个出色的程序员

    做一个出色的程序员,困难而高尚.本期 fir.im Weekly 精选了一些实用的 iOS,Android 开发工具和源码分享,还有一些关于程序员的成长 Tips 和有意思有质量的线下活动~ How ...

  8. asp.net 站点重启

    有时一些特殊情况需要重启站点,在System.Web.dll程序集下HttpRuntime类下有一个静态方法UnloadAppDomain,使用这个方法可以重启站点: protected void b ...

  9. transform:rotate()将元素进行不同角度的旋转

    通过设置transform:rotate()可以将元素进行不同角度的旋转: 下面是一些测试代码: <!DOCTYPE html> <html> <head> < ...

  10. 多线程 ThreadPool线程池

    简单说明一下: 线程池可以看做容纳线程的容器:一个应用程序最多只能有一个线程池:ThreadPool静态类通过QueueUserWorkItem()方法将工作函数排入线程池: 每排入一个工作函数,就相 ...