您的位置：首页 > Web前端 > JQuery

jquery列表顺序倒转排序效果

2013-12-13 18:17 489 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航