jQuery利用sort对DOM元素进行排序操作

前言

排序对于我们是再熟悉不过了，在绝大数应用程序中都会有这样一个场景：当我们从服务器端获取一个列表时，在界面上进行渲染，我们可以会依赖于某一个规则来进行排序，当然此时绝大多数会再次与服务器进行交互来进行重新渲染列表到客户端，这样做未尝不可，但是在有些情况下，我们既不需要利用框架也不需要重新生成列表到客户端，明明可以在客户端进行，达到我们的目的，为何要再一次发送请求到服务器呢？下面我们来看看。

话题

我们首先看看在w3c中js的sort方法。

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 + "
")
document.write(arr.sort())

结果输出：

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序，但是我们可以自定义排序规则。

我们在sort方法参数中自定义排序函数，如下：

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 + "
")
document.write(arr.sort(sortNumber))

输出如下：

如上是在w3c中的例子，是不是sort方法就这么简单呢？有何实际用途没有呢？

我能想到的实际场景：在页面上渲染一个列表时，可能该页内容比较多，我们需要滚动鼠标才能看到其他内容或者说该页前几条内容我们已经看过，想看看其他内容，此时我们需要将页面内容进行反转，我们该如何做呢？

利用sort方法对DOM元素排序

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

上述列表是通过日期进行排序，在右上角有一个排序图标，我们需要实现的是点击该排序图标，来实现列表升序和降序的切换。

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

@m.body

@m.postDate