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. 运用DebugDiag诊断ASP.Net异常

    Debug Diagnostic Tool (DebugDiag)是用来帮助诊断IIS/COM+等应用假死.性能差.内存泄露及碎片和崩溃等问题的工具. 本文介绍如何运用DebugDiag诊断特定的AS ...

  2. [安卓] 19、一个蓝牙4.0安卓DEMO

    一.工程结构&概述 整个应用包含两个按钮,一个是搜索所有蓝牙设备,另一个是连接所有蓝牙设备~ 下面是整个工程的文件结构: 二.代码业务流程跟踪 2.1.两个按钮 下面讲讲该工程里的主要跳转流程 ...

  3. openseadragon.js与deep zoom java实现艺术品图片展示

    openseadragon.js 是一款用来做图像缩放的插件,它可以用来做图片展示,做展示的插件很多,也很优秀,但大多数都解决不了图片尺寸过大的问题. 艺术品图像展示就是最简单的例子,展示此类图片一般 ...

  4. 从零开始用gulp

    gulp是基于流的前端构件化工具.目前比较火的前端构建化工具还是挺多的,grunt gulp fis3等等. 这个鬼东西有什么用?请参考https://www.zhihu.com/question/3 ...

  5. redis中使用java脚本实现分布式锁

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/115.html?1455860390 edis被大量用在分布式的环境中,自 ...

  6. Time33算法

    Time33是字符串哈希函数,现在几乎所有流行的HashMap都采用了DJB Hash Function,俗称"Times33"算法.Times33的算法很简单,就是不断的乘33. ...

  7. Atitit  循环(loop), 递归(recursion), 遍历(traversal), 迭代(iterate).

    Atitit  循环(loop), 递归(recursion), 遍历(traversal), 迭代(iterate). 1.1. 循环算是最基础的概念, 凡是重复执行一段代码, 都可以称之为循环. ...

  8. atitit。ocr框架类库大全 attilax总结

    atitit.ocr框架类库大全 attilax总结 Tesseract Asprise JavaOCR 闲来无事,发现百度有一个OCR文字识别接口,感觉挺有意思的,拿来研究一下. 百度服务简介:文字 ...

  9. Spring配置汇总

    现在主流的JavaWeb应用几乎都会用到Spring,以下是Spring的配置,以及结合Web的SpringMVC配置的汇总. jar包的引入 与Web项目集成 Spring配置文件 SpringMV ...

  10. AJAX大文件切割上传以及带进度条。

    分块传输的原理就是利用HTML5新增的文件slice截取函数. 代码如下: html: <input id="f" type="file" name=&q ...