快捷導(dǎo)航

jQuery利用sort對DOM元素進(jìn)行排序操作

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

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

前言

排序?qū)τ谖覀兪窃偈煜げ贿^了，在絕大數(shù)應(yīng)用程序中都會(huì)有這樣一個(gè)場景：當(dāng)我們從服務(wù)器端獲取一個(gè)列表時(shí)，在界面上進(jìn)行渲染，我們可以會(huì)依賴于某一個(gè)規(guī)則來進(jìn)行排序，當(dāng)然此時(shí)絕大多數(shù)會(huì)再次與服務(wù)器進(jìn)行交互來進(jìn)行重新渲染列表到客戶端，這樣做未嘗不可，但是在有些情況下，我們既不需要利用框架也不需要重新生成列表到客戶端，明明可以在客戶端進(jìn)行，達(dá)到我們的目的，為何要再一次發(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í)沒有使用參數(shù)，將按字母順序?qū)?shù)組中的元素進(jìn)行排序，說得更精確點(diǎn)，是按照字符編碼的順序進(jìn)行排序，但是我們可以自定義排序規(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方法就這么簡單呢？有何實(shí)際用途沒有呢？

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

利用sort方法對DOM元素排序

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

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

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

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

（1）定義一個(gè)全局變量。

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

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

（3）運(yùn)行JQuery中sort方法來進(jìn)行排序。

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

下面給出整個(gè)代碼。

 <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>

我們來演示一下：

當(dāng)然在客戶端利用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特性來進(jìn)行人名排序。

總結(jié)

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

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

您可能感興趣的文章: