<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>投票列表排序 - 默认，投票数
</title>
<script type="text/javascript" src="http://new-icon.ol-img.com/jslib/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="votebox">
<dl rel="1">
<dt>Name1
</dt>
<dd>votenum
<em>1
</em></dd>
</dl>
<dl rel="2">
<dt>Name2
</dt>
<dd>votenum
<em>11
</em></dd>
</dl>
<dl rel="3">
<dt>Name13
</dt>
<dd>votenum
<em>61
</em></dd>
</dl>
<dl rel="4">
<dt>Name14
</dt>
<dd>votenum
<em>6
</em></dd>
</dl>
<dl rel="5">
<dt>Name15
</dt>
<dd>votenum
<em>14
</em></dd>
</dl>
<dl rel="6">
<dt>Name16
</dt>
<dd>votenum
<em>19
</em></dd>
</dl>
</div>
<p>
<a href="javascript:;" id="defaultbtn">默认
</a>
<a href="javascript:;" id="rankbtn">投票排序
</a>
</p>
<script type="text/javascript">
$(function(){
$("#defaultbtn").click(function() {
setVoteboxData('default');
});
$("#rankbtn").click(function() {
setVoteboxData('votenum');
});
function setVoteboxData(rankType) {
rankType = rankType == 'votenum' ? 'votenum' : 'default';
voteCellsLength = $("dl").length;
if(voteCellsLength > 0) {
var voteCells = new Array();
for(var i = 0; i < voteCellsLength; i++) {
var relVal = $("dl:eq(" + i + ")").attr("rel");
var tmpArr = new Array();
tmpArr['data'] = '<dl rel="' + relVal + '">' + $("dl:eq(" + i + ")").html() + '</dl>';
tmpArr['ranknum'] = rankType == 'votenum' ? parseInt($("dl:eq(" + i + ")").find('em').html()): parseInt(relVal);
voteCells[i] = tmpArr;
}
// rank
for(var i = 0; i < voteCellsLength; i++) {
for(var j = i + 1; j < voteCellsLength; j++) {
if(voteCells[i]['ranknum'] < voteCells[j]['ranknum']) {
var tmpVal = voteCells[i];
voteCells[i] = voteCells[j];
voteCells[j] = tmpVal;
}
}
}
if(rankType == 'default') {
voteCells = voteCells.reverse();
}
var voteCellsStr = '';
for(var i = 0; i < voteCellsLength; i++) {
voteCellsStr += voteCells[i]['data'];
}
$("#votebox").html(voteCellsStr);
}
}
});
</script>
</body>
</html>
转载于:https://www.cnblogs.com/bandbandme/p/3966522.html
相关资源：HackerRankReact排序文章：HackerRank React：解决文章排序-源码
