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文件，打开后可以测试效果。
