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. MySQL--将MySQL数据导入到SQL Server

    随着时代的进步,社会的发展,各种技术层出不穷五花八门乱七八糟数不胜数(写作文呢!!!) 不扯废话,简单而言,很多公司都会同时使用多种数据库,因此数据在不同数据库之间导入导出就成为一个让人蛋疼的问题,对 ...

  2. C#Light for Unity 新例子

    近来有好几位询问C#Lite在Unity中使用的问题 我专门为C#Lite制作了 for Unity的新例子 ,这个例子名为languagetest 包含17个语言特性测试的文件 其中_6004_展示 ...

  3. 与其他.Net异步模式和类型进行互操作

    返回该系列目录<基于Task的异步模式--全面介绍> Tasks和异步编程模型APM(Tasks and the Asynchronous Programming Model) 从APM到 ...

  4. swift 项目 oc 和 swift 混用，文件相互引用

    创建swift工程后,如果后面想新建 oc 文件,这时会生成一个  AppName-Bridging-Header.h文件 一,在swift 文件中 1> 引用swift 文件 什么都不需要操作 ...

  5. Java基础之如何解决斗地主问题

        难的是逻辑的分析,把逻辑转化成代码是一种能力,这种能力需要多练习总结.     多多指教,共同进步. 问题: 要求实现斗地主游戏发牌过程,打印三个玩家的牌和底牌.在不看底牌的情况下,统计出三个 ...

  6. 爱上MVC系列~过滤器实现对响应流的处理

    回到目录 MVC的过滤器相信大家都用过,一般用来作权限控制,因为它可以监视你的Action从进入到最后View的渲染,整个过程ActionFilter这个过滤器都参与了,而这给我们的开发带来了更多的好 ...

  7. 拥抱cnpm

    在国内由于墙的原因,使用NPM安装模块经常会失败,要或在速度上会慢得跟蜗牛一样,这时候我们其实可以选择国内淘宝的NPM镜像,使用下面的命令来进行安装: npm install -g cnpm --re ...

  8. SVN批处理更新文件夹

    SVN批处理更新文件夹 "C:\Program Files\TortoiseSVN\bin\TortoiseProc.exe" /command:update /path:&quo ...

  9. img list

  10. java中final注意的问题

    public class Test{ public static void main(String[] args){ Person p = new Person(); } } /* 4.修饰的变量是一 ...