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. 解读jQuery中extend函数

    $.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );//console.log(window.a); ...

  2. 使用canvas检测HTML5视频解码错误

    乍一看这标题,有点吊炸天的赶脚,canvas跟<video>能有什么联系?不过请放心我不是标题党.事情是这样的: HTML5的<video>标签所支持的视频格式确实有限,mp4 ...

  3. 【译】用jQuery 处理XML-- DOM（文本对象模型）简介

    用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...

  4. C#基础入门一

    .net(软件开发平台)-------------------------------------------------------- 学习内容:.net平台下的开发语言. .net freamwo ...

  5. 正式开始jQuery源码的学习

    查了一些资料,2.0.3版本的jq源码分析的资料比较多,就以这个版本研究学习了. 今天正式开始.

  6. Oracle日期语言修改

    -- value带有两个参数,第一个指下限,第二个指上限,将会生成下限到上限之间的数字,但不包含上限.select ceil(dbms_random.value(1000,9999)) from du ...

  7. Atitit 桌面软件跨平台gui解决方案 javafx webview

    Atitit 桌面软件跨平台gui解决方案 javafx webview 1.1. 双向js交互1 1.2. 新弹出窗口解决1 1.3. 3.文档对象入口dom解析1 1.4. 所以果断JavaFX, ...

  8. Atitit 控制中心快速启动面板quick launcher

    Atitit 控制中心快速启动面板quick launcher contralPanel.bat aaaControlPanel.contrlx /AtiPlatf_auto/src_atibrow/ ...

  9. Linux初学 - Elasticsearch环境安装

    下载 https://www.elastic.co/downloads/elasticsearch 安装 rpm -ivh 也可以双击rpm包安装 修改elastaticsearch host配置 修 ...

  10. Jenkins的插件管理（安装和更新插件）

    使用Jenkins的编译部署项目需要依赖各种插件 下面安装Jenkins的各种插件: 1.登录Jenkins进入以下界面: 2.点击 系统管理 : 3.点击 管理插件 : 4.点击 可选插件 选择你需 ...