利用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 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
5种 JavaScript 方式实现数组扁平化
Oct 05 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生成文件
2007/01/15 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
validator验证控件使用代码
2010/11/23 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
简单解析Django框架中的表单验证
2015/07/17 Python
在python中画正态分布图像的实例
2019/07/08 Python
利用Python检测URL状态
2019/07/31 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Python阶乘求和的代码详解
2020/02/14 Python
python实现双人五子棋(终端版)
2020/12/30 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
PHP开发的一般流程
2013/08/13 面试题
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
区优秀教师事迹材料
2014/02/10 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
小学评语大全
2014/04/22 职场文书
爱心捐书活动总结
2014/07/05 职场文书
会计学专业求职信
2014/07/17 职场文书
2014年班主任工作总结
2014/11/08 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
八年级物理教学反思
2016/02/19 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js