利用jQuery对无序列表排序


  409人阅读  评论(0)  收藏  举报
  分类:
 
 

利用jQuery对无序列表排序

利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出。其中使用到的jQuery函数有ready()、get()、text()、each()、append()和JavaScript函数sort()。

1.jQuery函数介绍

(1)jQuery函数get()--获取匹配元素集合

该函数取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,实际上是元素数组)。其语法形式如下:

  
  
  1. object.get() 

注:如果你想要直接操作DOM对象而不是jQuery对象,这个函数非常有用。

(2)jQuery函数text()--获取和设置元素内容

该函数获取和设置匹配元素的文本内容。其语法形式如下:

  
  
  1. object.text([val|fn]) 

注:val和fn参数可选。val是设置元素的文本内容值;fn(index,text)函数返回一个字符串,接受两个参数,index为元素在集合中的索引位置,text为原先的text值。

(3)jQuery函数append()--向元素追加内容

该函数向每个匹配的元素内部追加内容。其语法形式如下:

  
  
  1. object.append(content|fn) 

注:这个操作与对指定的元素执行appendChild方法并将它们添加到文档中的情况类似。content参数表示追加的内容;fn(index,html)返回一个HTML字符串,用于追加到每一个匹配元素内部,接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。

2.JavaScript函数介绍

JavaScript函数sort()--元素排序,用于对数组元素进行排序。其语法形式如下:

  
  
  1. arrayObject.sort([sortby]) 

注:sortby可选,规定排列顺序,必须是函数。返回值为排序后的数组本身。如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序。说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b,其返回值如下:若a小于b,在排序后的数组中a应该出现在b之前,则返回一个小于0的值。若a等于b,则返回0。若a大于b,则返回一个大于0的值。

3.功能实现

实现无序列表项排序功能的步骤如下。

(1)获取所有的列表项,并将其装入数组。

(2)对数组对象进行排序。

(3)将排好序的数组重新填充到无序列表中。

首先,把jQuery库引入进来:

  
  
  1. <script language="JavaScript" src="jslib/jquery-1.6.js"></script> 

然后,添加完整代码:
  
  
  1. <script language="JavaScript" type="text/JavaScript"> 
  2. 2 $(document).ready(function(){  
  3. 3   var items = $(".orderobj li").get();    //获取所有待排序li装入数组items  
  4. 4   items.sort(function(a,b)                //调用JavaScript内置函数sort  
  5. 5   {  
  6. 6       var elementone = $(a).text();  
  7. 7       var elementtwo = $(b).text();  
  8. 8       if(elementone < elementtwo) return -1;   
  9. 9       if(elementone > elementtwo) return 1;  
  10. 10      return 0;  
  11. 11  });  
  12. 12  
  13. 13  var ul = $(".orderobj");  
  14. 14  $.each(items,function(i,li)       
  15.                 //通过遍历每一个数组元素,填充无序列表  
  16. 15  {  
  17. 16      ul.append(li);  
  18. 17  });  
  19. 18 });  
  20. 19 </script> 

以上代码通过数组排序并重新填充无序列表使得列表项有序。具体效果如图4.11所示。

 
图4.11  无序列表项排序

原文:http://book.51cto.com/art/201207/350481.htm

0
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值