利用jQuery对无序列表排序的简单方法


Posted in Javascript onOctober 16, 2016

利用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="jslib/jquery-1.6.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对无序列表排序的简单方法 

具体效果如图4.11所示。

以上就是小编为大家带来的利用jQuery对无序列表排序的简单方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
Vue实现简单的留言板
Oct 23 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 #Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 #Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 #Javascript
JS实现禁止鼠标右键的功能
Oct 15 #Javascript
Vue.js快速入门实例教程
Oct 15 #Javascript
JavaScript随机生成颜色的方法
Oct 15 #Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 #Javascript
You might like
Zerg兵种介绍
2020/03/14 星际争霸
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
Python比较两个图片相似度的方法
2015/03/13 Python
django+mysql的使用示例
2018/11/23 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
python中最小二乘法详细讲解
2021/02/19 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
安全责任协议书
2014/04/21 职场文书
行政专员求职信范文
2014/05/03 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
golang json数组拼接的实例
2021/04/28 Golang
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技