快捷導(dǎo)航

jQuery利用sort對DOM元素進行排序操作

更新時間：2016年11月07日 11:10:59 作者：JeffckyWang

這篇文章主要為大家詳細介紹了JQuery利用sort對DOM元素進行排序的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

排序?qū)τ谖覀兪窃偈煜げ贿^了，在絕大數(shù)應(yīng)用程序中都會有這樣一個場景：當我們從服務(wù)器端獲取一個列表時，在界面上進行渲染，我們可以會依賴于某一個規(guī)則來進行排序，當然此時絕大多數(shù)會再次與服務(wù)器進行交互來進行重新渲染列表到客戶端，這樣做未嘗不可，但是在有些情況下，我們既不需要利用框架也不需要重新生成列表到客戶端，明明可以在客戶端進行，達到我們的目的，為何要再一次發(fā)送請求到服務(wù)器呢？下面我們來看看。

話題

我們首先看看在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>

結(jié)果輸出：

George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas

如果調(diào)用該方法時沒有使用參數(shù)，將按字母順序?qū)?shù)組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序，但是我們可以自定義排序規(guī)則。

我們在sort方法參數(shù)中自定義排序函數(shù)，如下：

<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方法就這么簡單呢？有何實際用途沒有呢？

我能想到的實際場景：在頁面上渲染一個列表時，可能該頁內(nèi)容比較多，我們需要滾動鼠標才能看到其他內(nèi)容或者說該頁前幾條內(nèi)容我們已經(jīng)看過，想看看其他內(nèi)容，此時我們需要將頁面內(nèi)容進行反轉(zhuǎn)，我們該如何做呢？

利用sort方法對DOM元素排序

首先我們來看看界面效果，如下：

上述列表是通過日期進行排序，在右上角有一個排序圖標，我們需要實現(xiàn)的是點擊該排序圖標，來實現(xiàn)列表升序和降序的切換。

既然是排序我們首先需要考慮的是要有一個排序規(guī)則，我們添加一個排序序號則可以實現(xiàn)在客戶端列表的排序或者反轉(zhuǎn)。接下來我們通過ASP.NET MVC來實現(xiàn)演示sort的反轉(zhuǎn)。看下視圖代碼：

 <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 ，通過此特性來實現(xiàn)初始化的排序。該特性會用于進行DOM元素值的比較，緊接著利用sort方法進行排序。其實說則是調(diào)用JQuery中的sort方法，最終還是調(diào)用js中的sort方法而已。我們需要對列表進行反轉(zhuǎn)，需要以下幾步。

（1）定義一個全局變量。

為什么要定義全局變量？此變量用來保存排序的狀態(tài)（asc or desc）。

（2）用JQuery來選擇列表中的所有元素。

（3）運行JQuery中sort方法來進行排序。

（4）通過detach方法來重新將列表attach到父節(jié)點中。

下面給出整個代碼。

 <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不僅僅是反轉(zhuǎn)，還可以排序，如下人員信息列表。

<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特性來進行人名排序。

總結(jié)

本節(jié)通過實際例子來講述了JQuery中的sort方法。我也是在查資料過程中看到在客戶端排序的思路，于是進行了學(xué)習并和大家分享下。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: