<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 style="margin-top:20px"><a href="#">@m.title</a></div>
<div class="q_content">
<p>@m.body</p>
</div>
<div class="q_answeroption" style="border-top: 1px dotted #CCC;padding-bottom: 5px;padding-top: 5px;">
<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>
