JQuery利⽤sort对DOM元素进⾏排序
前⾔
排序对于我们是再熟悉不过了，在绝⼤数应⽤程序中都会有这样⼀个场景：当我们从服务器端获取⼀个列表时，在界⾯上进⾏渲染，我们可以会依赖于某⼀个规则来进⾏排序，当然此时绝⼤多数会再次与服务器进⾏交互来进⾏重新渲染列表到客户端，这样做未尝不可，但是在有些情况下，我们既不需要利⽤框架也不需要重新⽣成列表到客户端，明明可以在客户端进⾏，达到我们的⽬的，为何要再⼀次发送请求到服务器呢？下⾯我们来看看。
话题
我们⾸先看看在w3c中js的sort⽅法。
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
结果输出：
George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas
如果调⽤该⽅法时没有使⽤参数，将按字母顺序对数组中的元素进⾏排序，说得更精确点，是按照字符编码的顺序进⾏排序，但是我们可以⾃定义排序规则。
我们在sort⽅法参数中⾃定义排序函数，如下：
<script type="text/javascript">
function sortNumber(a,b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
输出如下：
10,5,40,25,1000,1
1,5,10,25,40,1000
如上是在w3c中的例⼦，是不是sort⽅法就这么简单呢？有何实际⽤途没有呢？
我能想到的实际场景：在页⾯上渲染⼀个列表时，可能该页内容⽐较多，我们需要滚动⿏标才能看到其他内容或者说该页前⼏条内容我们已经看过，想看看其他内容，此时我们需要将页⾯内容进⾏反转，我们该如何做呢？
利⽤sort⽅法对DOM元素排序
⾸先我们来看看界⾯效果，如下：
上述列表是通过⽇期进⾏排序，在右上⾓有⼀个排序图标，我们需要实现的是点击该排序图标，来实现列表升序和降序的切换。
既然是排序我们⾸先需要考虑的是要有⼀个排序规则，我们添加⼀个排序序号则可以实现在客户端列表的排序或者反转。接下来我们通过ASP.NET MVC来实现演⽰sort的反转。看下视图代码：
<div id="MessageList">
@{
int count = 0;
foreach (var m in Model)
{
count++;
<div class="message-list-item" data-sort="@count">
<div class="main-content">
<div ><a href="#">@m.title</a></div>
<div class="q_content">
<p>@m.body</p>
</div>
<div class="q_answeroption" >
<div class="lf">
</div>
<div class="answer_author">
<a href="#" class="bluelink">@m.author</a>
<span class="v-split">|</span>
@m.postDate
</div>
</div>
</div>
</div>
}
}
</div>
上述 class="message-list-item" 有⼀个特性 data-sort ，通过此特性来实现初始化的排序。该特性会⽤于进⾏DOM元素值的⽐较，紧接着利⽤sort⽅法进⾏排序。其实说则是调⽤JQuery中的sort⽅法，最终还是调⽤js中的sort⽅法⽽已。我们需要对列表进⾏反转，需要以下⼏步。
（1）定义⼀个全局变量。
为什么要定义全局变量？此变量⽤来保存排序的状态（asc or desc）。
（2）⽤JQuery来选择列表中的所有元素。
（3）运⾏JQuery中sort⽅法来进⾏排序。
（4）通过detach⽅法来重新将列表attach到⽗节点中。
下⾯给出整个代码。
<script type="text/javascript">
var sortThread = {};
$(function () {
sortThread.sortAscending = true;
$("#ReverseOrder").on("click", function () {
sortThread.sortAscending = !sortThread.sortAscending;
var $msgListItem = $(".message-list-item");
$msgListItem.sort(function (a, b) {
var sort1 = a.getAttribute('data-sort') * 1;
var sort2 = b.getAttribute('data-sort') * 1;
var sortNum = 1;
if (!sortThread.sortAscending)
sortNum = -1;
if (sort1 > sort2)
return 1 * sortNum;
if (sort1 < sort2)
return -1 * sortNum;
return 0;
});
$msgListItem.detach().appendTo("#MessageList");
});
});
</script>
我们来演⽰⼀下：
当然在客户端利⽤sort不仅仅是反转，还可以排序，如下⼈员信息列表。
<ul class="peopleList">
<li data-name="John Doe">Mr. John Doe</li>
<li data-name="Trent Richardson">Mr. Trent Richardson</li>
<li data-name="Cindy Smith">Ms. Cindy Smith</li>
<li data-name="Bill Williams">Mr. Bill Williams</li>
<li data-name="Jane Doe">Mrs. Jane Doe</li>
</ul>
同理获取上述data-name特性来进⾏⼈名排序。
总结
本节通过实际例⼦来讲述了JQuery中的sort⽅法。我也是在查资料过程中看到在客户端排序的思路，于是进⾏了学习并和⼤家分享下。
jquery怎么进行验证

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。