• jquery列表顺序倒转排序效果


    html文件代码:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     5 <meta name="author" content="ini.iteye.com" /> 
     6 <title>jQuery反向排序(倒序)子对象</title>
     7 <style type="text/css">
     8 *{margin:0;padding:0;}
     9 body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}  
    10 #layout{width:405px;margin:15px auto;}
    11 ul{list-style: none;float:left;margin:0 15px;}
    12 li{padding:5px 10px;width:100px;color:#fff;}
    13 </style>
    14 </head>
    15 <body>
    16 <div id="layout">
    17     <ul id="test"></ul> 
    18     <ul>
    19         <div style="padding:110px 0;">==></div>
    20     </ul>
    21     <ul id="test2"></ul> 
    22     <div style="clear:both;padding:20px;text-align:center;">
    23         <input type="button" id="btn" value="去掉(最后)一个,然后重新排序" /> 
    24         <input type="button" id="btn2" value="重置" /> 
    25     </div>
    26 </div>
    27 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
    28 <script type="text/javascript">
    29 (function($) {
    30     $.extend({
    31         reverseChild : function(obj, child) { 
    32             var childObj = $(obj).find(child);
    33             var total = childObj.length; 
    34 
    35             childObj.each(function(i) { 
    36                 $(obj).append(childObj.eq((total-1)-i)); 
    37             }); 
    38 
    39             //console.log(childObj.html()); 
    40         }
    41     });
    42 })(jQuery);
    43 
    44 //生成测试对象
    45 function maskList() {
    46     var color = ["red", "green", "blue", "orange", "#AAC93E", "#27BFC1", "#2790EB", "#D139D1", "#BC5895", "#5FA0D3"];
    47     var html = '';
    48     for (var i=0; i<color.length; i++) {
    49         html += '<li style="background:'+color[i]+'">'+(i+1)+'</li>';
    50     }
    51 
    52     $("#test").html(html);
    53     $("#test2").html($("#test").html());
    54     $.reverseChild("#test2", 'li');
    55 }
    56 
    57 $(function() { 
    58     maskList();
    59 
    60     $("#btn").click(function() {
    61         var total = $("#test li").length;
    62 
    63         if(total > 2) {
    64             $("#test li").last().remove();
    65             $("#test2").html($("#test").html());
    66             $.reverseChild("#test2", 'li');
    67         } else {
    68             alert("亲,留两个吧!");
    69         }
    70     });
    71 
    72     $("#btn2").click(maskList);
    73 });
    74 </script>
    75 </body>
    76 </html>

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

  • 相关阅读:
    正则表达式获取远程网页
    Devexpress 常见问题
    CSS 带显示隐藏左部页面按钮
    CSS 技巧积累
    SQL 常用操作
    重置 自增字段 起始值 和 步长
    Devexpress TreeList
    Devexpress GridControl
    JS常用
    ajax跨域请求
  • 原文地址:https://www.cnblogs.com/sosoft/p/3473671.html
Copyright © 2020-2023  润新知