jQuery實現對無序列表的排序功能
來源:易賢網 閱讀:1187 次 日期:2016-07-12 15:30:12
溫馨提示:易賢網小編為您整理了“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程序設計有所幫助。

更多信息請查看網絡編程
易賢網手機網站地址:jQuery實現對無序列表的排序功能
由于各方面情況的不斷調整與變化,易賢網提供的所有考試信息和咨詢回復僅供參考,敬請考生以權威部門公布的正式信息和咨詢為準!

2026國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
云南網警備案專用圖標
聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網
云南網警報警專用圖標
未满十八18勿进黄网站免费看