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

如上是在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 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(&#39;data-sort&#39;) * 1;
  var sort2 = b.getAttribute(&#39;data-sort&#39;) * 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特性來進行人名排序。