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 相关文章推荐
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
DOM 高级编程
May 06 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
简单了解three.js 着色器材质
Aug 03 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 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
vue2配置scss的方法步骤
2019/06/06 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
Python手机号码归属地查询代码
2016/05/04 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
python3处理含有中文的url方法
2018/05/10 Python
python实现汽车管理系统
2018/11/30 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
python实现人机五子棋
2020/03/25 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
药品业务员岗位职责
2014/04/17 职场文书
个人合作协议书范本
2014/04/18 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书