<!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>