利用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 call 函数的用法说明
Apr 09 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 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 编程请选择正确的文本编辑软件
2006/12/21 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
paypal即时到账php实现代码
2010/11/28 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
浅析php header 跳转
2013/06/17 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
处理Python中的URLError异常的方法
2015/04/30 Python
python 远程统计文件代码分享
2015/05/14 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python进行文件对比的方法
2018/12/24 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
求职个人评价范文
2014/04/09 职场文书
健康状况证明书
2014/11/26 职场文书
环保守法证明
2015/06/24 职场文书
Go Plugins插件的实现方式
2021/08/07 Golang