利用jQuery實作對無序列表進行排序

本文實例講述了jQuery實作對無序列表的排序功能。分享給大家供大家參考，具體如下：

利用jQuery對無序列表排序的原理是：取得到無序列表中的所有列表項，並轉成數組形式， 使用JavaScript函數對其進行排序後再次輸出。其中使用到的jQuery函數有ready()、get()、

text()、each()、append()和JavaScript函數sort()。

1． jQuery函數介紹
（1）jQuery函數get()--取得符合元素集合
該函數取得所有符合元素的一種向後相容的方式（不同於jQuery物件，實際上是元素數組）。其語法形式如下：
object.get()

註：如果你想要直接操作DOM物件而不是jQuery對象，這個函數非常有用。

（2）jQuery函數text()--取得並設定元素內容

此函數取得並設定符合元素的文字內容。其語法形式如下：

object.text([val|fn])

註：val和fn參數可選。 val是設定元素的文字內容值；fn(index,text)函數傳回一個字串，接受兩個參數，index為元素在集合中的索引位置，text為原先的text值。

（3）jQuery函數append()--向元素追加內容

此函數向每個符合的元素內部追加內容。其語法形式如下：

object.append(content|fn)

註：這個操作與對指定的元素執行appendChild方法並將它們新增至文件的情況類似。 content參數表示追加的內容；fn(index,html)傳回一個HTML字串，用於追加到每個符合元素內部，接受兩個參數，index參數為物件在這個集合中的索引值，html參數為這個物件原先的html值。

2． JavaScript函數介紹

JavaScript函數sort()--元素排序，用於對陣列元素進行排序。其語法形式如下：

arrayObject.sort([sortby])

註：sortby可選，規定排列順序，必須是函數。傳回值為排序後的陣列本身。如果在呼叫該方法時沒有使用參數，則會按字母順序對數組中的元素進行排序。說得更精確點，是按照字元編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字串（如有必要），以便進行比較。

如果想按照其他標準進行排序，就需要提供比較函數，該函數要比較兩個值，然後傳回一個用於說明這兩個值的相對順序的數字。比較函數應該有兩個參數a和b，其傳回值如下：若a小於b，在排序後的陣列中a應該會出現在b之前，則傳回一個小於0的值。若a等於b，則回傳0。若a大於b，則傳回大於0的值。

3．功能實作

實作無序列表項排序功能的步驟如下。

（1）取得所有的清單項，並將其裝入陣列。

（2）對陣列物件進行排序。

（3）將排好序的陣列重新填入無序列表中。

首先，把jQuery庫引入：

<script language="JavaScript" src="jquery-1.7.2.min.js"></script>

然後，加入如下排序功能碼：

<script language="JavaScript" type="text/JavaScript">
 $(document).ready(function(){
  var items = $(".orderobj li").get(); //获取所有待排序li装入数组items
  items.sort(function(a,b) //调用JavaScript内置函数sort
  {
    var elementone = $(a).text();
    var elementtwo = $(b).text();
    if(elementone < elementtwo) return -1;
    if(elementone > elementtwo) return 1;
   return 0;
 });
 var ul = $(".orderobj");
 $.each(items,function(i,li)
 //通过遍历每一个数组元素，填充无序列表
 {
   ul.append(li);
 });
 });
</script>

以上程式碼透過陣列排序並重新填入無序列表使得清單項目有序。具體效果如圖：

以上是利用jQuery實作對無序列表進行排序的詳細內容。更多資訊請關注PHP中文網其他相關文章！