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交换变量的方法
Jan 21 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 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
一个ftp类(ini.php)
2006/10/09 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
Angular2库初探
2017/03/01 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
数据库连接池的工作原理
2012/09/26 面试题
大学毕业生个人自荐信范文
2014/01/08 职场文书
三查三看党性分析材料
2014/02/18 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
大学生村官演讲稿
2014/04/25 职场文书
企业管理标语
2014/06/10 职场文书
婚内分居协议书范文
2014/11/26 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
python中的装饰器该如何使用
2021/06/18 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL