<!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>
- 浏览: 260844 次
- 性别:
- 来自: 北京
最新评论
-
haixin3036:
jQuery是一套跨浏览器的JavaScript库,简化HTM ...
jquery sizzle 选择器浅析 -
panshunchang:
非常感谢分享,正找这东西呢。
基于jQuery的QQ表情插件 -
yuur369:
不错。。。
移动端webapp开发必备知识
相关推荐
jquery表格排序jquery表格排序jquery表格排序jquery表格排序jquery表格排序jquery表格排序jquery表格排序jquery表格排序
Jquery表格排序插件,支持快速排序,和复杂排序
jquery拖动排序插件制作选项列表拖动排序代码 jquery拖动排序插件制作选项列表拖动排序代码
jQuery分页排序插件是一款灵活的jQuery插件,支持排序,分页和过滤的HTML结构。
jquery拖动排序,div拖拽排序代码,欢迎广大朋友下载.
这个插件是由苏文博于2015年4月18日在西安开发的基于jquery的图标纵向排序拖放插件,图标可以纵向排序,并且可以类似win7桌面一样,自由拖放。可适用于web桌面的图标操作。
jQuery从小到大正序或从大小到倒序列表排序代码一款支持从小到大或者从大到小或者取消排序三种模式的jQuery列表排序正序倒序代码。
Jquery表格排序
jquert 表格排序插件 jquery table 排序插件jquert 表格排序插件 jquery table 排序插件jquert 表格排序插件 jquery table 排序插件
一款支持从小到大或者从大到小或者取消排序三种模式的jQuery列表排序正序倒序代码。
C#和jQuery前后端简单实现冒泡排序。 前端通过jquery进行冒泡数据排序的实现分析,能够对于初学此排序的开发者有一个直观的理解
jQuery 获取对象 定位子对象,学习jquery 定位子对象的朋友可以参考下。
jquery表格排序插件 jquery表格排序插件 jquery表格排序插件
jquery拖拽排序插件div自由拖动排序代码
jquery 实现排序和分页 jquery 实现排序和分页
jquery拖动排序插件Nestable
table排序类,调用十分方便,点击表格标题实现升降序排序,可以支持中文排序
obj为对象,如student对象,sortName为排序字段,sortOrder为升序或降序,升序为asc,降序为desc 如果两边都为数字,转换为数字比较 如果两边都为String,比较string 如果一边是数字,一边是String,转换为数字。 ...
jquery表格排序和筛选表.rar
jQuery UI 排序(Sortable)