jQuery反向排序(倒序)子对象

最新推荐文章于 2022-11-10 08:39:56 发布

weixin_33928467

最新推荐文章于 2022-11-10 08:39:56 发布

阅读量1.5k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://my.oschina.net/pandao/blog/76923

版权

为什么80%的码农都做不了架构师？>>>

效果：

jQuery反向排序(倒序)子对象

扩展jQuery的方法:

$.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)); 
			}); 
		}
	});

完整示例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="pandao QQ:272383090" /> 
<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://localhost/jsapi/jquery/jquery.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>

转载于:https://my.oschina.net/pandao/blog/76923