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. 推荐书籍 -《移动App测试的22条军规》

    在今天的博文中,博主希望给大家分享一本博主同事黄勇的最新利作:<移动App测试的22条军规>.黄勇是ThoughtWorks资深敏捷QA和咨询师.对于我来说,和黄勇在一起的工作的这个项目, ...

  2. 【原创】三分钟教你学会MVC框架——基于java web开发（2）

    没想到我的上一篇博客有这么多人看,还有几位看完之后给我留言加油,不胜感激,备受鼓励,啥都别说了,继续系列文章之第二篇.(如果没看过我第一篇博客的朋友,可以到我的主页上先浏览完再看这篇文章,以免上下文对 ...

  3. [ACM_动态规划] Alignment （将军排队)

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28415#problem/F 题目大意:有n个士兵排成一列,将军想从中抽出最少人数使队伍中 ...

  4. 纯CSS实现3D按钮效果

    今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...

  5. MVVM架构~mvc,mvp,mvvm大话开篇

    返回目录 百度百科的定义: MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负 责显示.作为一种新 ...

  6. 知方可补不足~SqlServer连接的复用MultipleActiveResultSets

    回到目录 MultipleActiveResultSets可以使数据库连接复用,但当你上了moebius这种集群工具后,这个选项不能开启(默认是false),当你使用EF等ORM工具时,这个选项会默认 ...

  7. java 线程安全 Lock

    java.util.concurrent.locks 对于线程安全我们前面使用了synchronized关键字,对于线程的协作我们使用Object.wait()和Object.notify().在JD ...

  8. Ext2.x学习笔记

    Ext2.X学习笔记一 一.ExtJS简介  1.1 什么是Ext JS? · Ext JS是一个Ajax框架,可以用来开发富客户端的Ajax应用,是一个用javascript写的,主要用于创建前端用 ...

  9. C语言数组空间的初始化详解

    数组空间的初始化就是为每一个标签地址赋值.按照标签逐一处理.如果我们需要为每一个内存赋值,假如有一个int a[100];我们就需要用下标为100个int类型的空间赋值.这样的工作量是非常大的,我们就 ...

  10. Wait Type：IO_COMPLETION

    在等待 CXPACKET 完成的时间内,我查看 sys.dm_exec_requests ,发现Session的 Logical Read/Write, Physical Read 都没有变化.Wai ...