实现html页面 按照指定的方式升降排序(js 重新排序元素)
10/14
实现html页面 按照指定的方式升降排序，直接上代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
.container{width:600px;margin:0 auto;}
ul,li{list-style: none;border: 1px solid #ccc;width:100px;margin:0;padding:0;}
#all2,#all{float:left;margin: 50px;}
</style>
</head>
<body>
<div class="container2">
<ul>
<li>
aaa
<input type="text" class="b2" value="1234">
</li>
<li>
aaa
<input type="text" class="b2" value="12">
</li>
<li>
aaa
<input type="text" class="b2" value="96">
</li>
<li>
aaa
<input type="text" class="b2" value="5">
</li>
<li>
aaa
<input type="text" class="b2" value="66">
</li>
<li>
aaa
<input type="text" class="b2" value="2">
</li>
</ul>
<button id="asc2">从高到低排序然后-从低到高排序</button>
</div>
<script type="text/javascript">
var sortThread = {};
$(function () {
sortThread.sortAscending = true;
$("#asc2").click(function () {
sortThread.sortAscending = !sortThread.sortAscending;
var $msgLi = $(".container2>ul>li");
$msgLi.sort(function (a, b) {
var sort1 = $(a).find('.b2').val() * 1;
var sort2 = $(b).find('.b2').val() * 1;
var sortNum = 1;
if (!sortThread.sortAscending)
sortNum = -1;
if (sort1 > sort2)
return 1 * sortNum;
//从高到低
if (sort1 < sort2)
return -1 * sortNum;
return 0;
});
$msgLi.detach().appendTo(".container2>ul");
});
});
</script>
</body>
</html>
版权属于：
Dcr163的博客
本文链接：
http://dcr163.cn/90.html（转载时请注明本文出处及文章链接）
