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