jQuery列表排序从小到大代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery列表排序从小到大代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery列表排序从小到大代码</title>
<link rel="stylesheet" href="css/rank.css"/>
</head>
<body>
<ul>
	<li>4</li>
	<li>7</li>
	<li>9</li>
	<li>2</li>
	<li>1</li>
	<li>5</li>
	<li>6</li>
	<li>8</li>
	<li>3</li>
	<li>3</li>
</ul>
<div>
	<button>从小到大</button><button>取消排序</button><button>从大到小</button>
</div>
<script src="js/jquery-2.2.3.min.js"></script>
<script>
	var color = ['#ffcc66' , '#ffcccc' , '#cccc33' , '#cccccc' , '#999933' , '#9999cc' , '#663333' , '#6666cc' , '#FF6A6A' , '#009966'];
	var initList = [], domArr = [];
	$('li').each(function(a){
		$(this).css('background' , color[a]);
		$(this).attr('title' , '原位置为：'+(a+1));
		initList[a] = $(this).html();
	})
	/*
	从小到大排序
	 */
	function smallToBig(){
		getDom();
		$.each(domArr , function(i){
			$.each(domArr , function(j){
				if( domArr[i].html() < domArr[j].html()){
					mid = domArr[j]; domArr[j] = domArr[i]; domArr[i] = mid;
				}
			})
		})
		appendDom();
	}
	/*
	 取消排序
	 */
	function cancleRank(){
		getDom();
		$.each(initList,function(b){
			$.each(domArr,function(c){
				if(domArr[c].html() == initList[b]){
					$('ul').append(domArr[c]);
				}
			})
		})
	}
	/*
	 从大到小排序
	 */
	function bigToSmall(){
		getDom();
		$.each(domArr , function(i){
			$.each(domArr , function(j){
				if( domArr[i].html() > domArr[j].html()){
					mid = domArr[j]; domArr[j] = domArr[i]; domArr[i] = mid;
				}
			})
		})
		appendDom()
	}
	/*
	取出所有li放进数组
	 */
	function getDom(){
		$('li').each(function( m ){
			domArr[m] = $(this);
		})
	}
	/*
	将数组中的li插入ul(原ul中的li自动删除。DOM元素的特性。)
	 */
	function appendDom(){
		$.each( domArr, function(d){
			$('ul').append( domArr[d] );
		})
	}
	var funSum = [ smallToBig , cancleRank , bigToSmall];
	$('button').click(function(){
		var fun = funSum[$(this).index()]
		fun();
	})
</script>
</body>
</html>

CSS代码(rank.css):

*{margin:0;padding:0;list-style:none;}
ul{width:40%;margin:6% auto;}
li{padding:2% 0;text-indent:2em;color:#fff;font-weight:bold;}
div{width:40%;margin:0 auto;}
button{display:inline-block;background:#EE4000;border-top-right-radius:10px;border-bottom-right-radius:10px;color:#fff;font-weight:bold;width:33.333%;padding:7% 0;border:none;outline:none;}
button:nth-child(1){background:#71C671;border-top-left-radius:10px;border-bottom-left-radius:10px;border-top-right-radius:0px;border-bottom-right-radius:0px;}
button:nth-child(2){border-radius:0;background:#f90;}

附件:下载该文件资源,减少时间成本(增值服务)