jQuery实现对无序列表的排序功能(附demo源码下载)


Posted in Javascript onJune 25, 2016

本文实例讲述了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实现对无序列表的排序功能(附demo源码下载)

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
vue实现五子棋游戏
May 28 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 #Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 #Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 #Javascript
jQuery图片渐变特效的简单实现
Jun 25 #Javascript
js删除局部变量的实现方法
Jun 25 #Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 #Javascript
javascript 广告移动特效的实现代码
Jun 25 #Javascript
You might like
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
清除输入框内的空格
2016/12/21 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
python删除列表中重复记录的方法
2015/04/28 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
介绍一下#error预处理
2015/09/25 面试题
服装厂厂长岗位职责
2013/12/27 职场文书
优秀团队获奖感言
2014/02/19 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
网络管理员岗位职责
2015/02/12 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书