序

排序是我们熟悉的。在大多数应用程序中，都有这样一个场景：当我们从服务器获得一个列表，并在界面上呈现它时，我们可以依靠某种规则来对它进行排序。当然，他们中的大多数人会再次与服务器交互，将列表重新呈现给客户端，这还不错。然而，在某些情况下，我们不需要使用框架或向客户端重新生成列表，但是我们显然可以在客户端上这样做来实现我们的目标。让我们看看。

主题

让我们首先看看w3c中js的排序方法。

脚本类型=' 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())/脚本结果输出：

乔治，约翰，托马斯，詹姆斯，阿德瑞，马丁阿德瑞，乔治，詹姆斯，约翰，马丁，托马斯

如果在没有参数的情况下调用方法，数组中的元素将按字母顺序排序。更准确地说，它将按照字符编码的顺序进行排序，但我们可以自定义排序规则。

我们在sort method参数中自定义排序函数，如下所示：

脚本类型='text/javascript '函数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[

10,5,40,25,1000,11,5,10,25,40,1000

以上是w3c中的一个例子，排序方法就这么简单吗？有什么实际用途吗？

我可以想到实际的场景：在一个页面上渲染一个列表的时候，页面上可能会有更多的内容，所以我们需要滚动鼠标才能看到其他内容，或者我们已经看到了页面的前几个内容，想要看到其他内容。此时，我们需要反转页面的内容。我们做什么呢

使用排序方法对DOM元素进行排序

首先，我们来看看界面效果，如下所示：

以上列表按日期排序，右上角有一个排序图标。我们需要实现的是点击排序图标，在列表的升序和降序之间切换。

既然是排序，我们首先需要考虑的就是有一个排序规则。我们可以通过添加排序序号来排序或反转客户端列表。接下来，我们演示ASP.NET MVC的排序反转。查看视图代码：

div id=' MessageList ' @ { int count=0；foreach(模型中的var m){ count；div class=' message-list-item ' data-sort=' @ count ' div class=' main-content ' div style=' margin-top :20 px ' a href='#'@m.title/a/div class=' q _ content ' p@m.body/p/div class=' q _ answer option ' style=' border-top : 1px虚线# CCC衬垫-bottom : 5px；衬垫-top : 5px；div class=' lf '/div class=' answer _ author ' a href=' # ' class='bluelink'@m.author/a span class=' v-split ' |/span @ m . PostDate/div/div/div } }/div上面的class='message-list-item '有一个属性data-sort，通过它可以实现初始化排序。此功能用于比较DOM元素值，然后通过排序方法进行排序。其实就是在JQuery中调用sort方法，最后在js中调用sort方法。我们需要反转列表，并需要以下步骤。

(1)定义一个全局变量。

为什么要定义全局变量？该变量用于保存排序状态(asc或desc)。

(2)使用JQuery选择列表中的所有元素。

(3)运行JQuery中的排序方法进行排序。

(4)通过分离方法将列表重新附加到父节点。

整个代码如下。

脚本类型=' text/JavaScript ' var排序线程={ }；$(function(){排序线程。sortascending=true$('#ReverseOrder ').on('click '，function(){ sort thread。sortascending=！排序线程var $msgListItem=$(' .消息列表项目');$msgListItem.sort(函数(a，b){ var sort 1=a . GetAttribute(' data-sort ')* 1；var sort 2=b . GetAttribute(' data-sort ')* 1；var sortNum=1；if(！排序线程。sortascending)sort num=-1；if (sort1 sort2)返回1 *架次数(1架次2)返回-1 *排序编号；返回0;});$msgListItem.detach().appendo(' # MessageList ')；});});/script我们来演示一下：

当然在客户端利用分类不仅仅是反转，还可以排序，如下人员信息列表。

李先生。无名氏/李莉资料名称='特伦特理查森'先生。特伦特理查森/李莉资料-姓名='辛迪史密斯'女士。辛迪史密斯/李莉资料名称='比尔威廉姆斯'先生。比尔威廉姆斯/李莉资料-姓名='无名氏'夫人。无名氏同理获取上述数据名称特性来进行人名排序。

总结

本节通过实际例子来讲述了JQuery中的分类方法。我也是在查资料过程中看到在客户端排序的思路，于是进行了学习并和大家分享下。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。