利用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="jslib/jquery-1.6.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>
以上代碼通過數組排序並重新填充無序列表使得列表項有序。
具體效果如圖4.11所示。
以上就是小編為大家帶來的利用jQuery對無序列表排序的簡單方法全部內容了,希望大家多多支持~