首頁 > web前端 > js教程 > 利用jQuery實作對無序列表進行排序

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

怪我咯
發布: 2017-04-01 09:23:56
原創
2025 人瀏覽過

本文實例講述了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實作對無序列表進行排序

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板