利用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 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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
php flush类输出缓冲剖析
2008/10/19 PHP
php短址转换实现方法
2015/02/25 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
Python中方法链的使用方法
2016/02/23 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
新品发布会主持词
2014/04/02 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
党建工作整改措施
2014/10/28 职场文书
失恋33天观后感
2015/06/11 职场文书
小学教代会开幕词
2016/03/04 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
解决MySQL报“too many connections“错误
2022/04/19 MySQL