本文實例講述了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中文網其他相關文章!