位置: 编程技术 - 正文
jQuery实现对无序列表的排序功能(附demo源码下载)(无序列表html)
编辑：rootadmin推荐整理分享jQuery实现对无序列表的排序功能(附demo源码下载)(无序列表html)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:无序排列html,html无序列表怎么居左,html5 无序列表,jquery 序列化,js对象无序,jquery数组排序,html5 无序列表,无序排列html,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例讲述了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库引入进来：
然后，添加如下排序功能代码：
以上代码通过数组排序并重新填充无序列表使得列表项有序。具体效果如图：
完整实例代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jquery实现上传文件大小类型的验证例子(推荐) jquery实现上传文件大小类型的验证例子(推荐)!DOCTYPEhtmlhtmlheadmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/scriptsrc="jquery1.8/jquery-1.8.0.js"type="text/javascript
JQuery控制图片由中心点逐渐放大效果 有的时候我们需要做一个当鼠标放置在图片上的时候，希望图片逐渐变大，即图片的width和height逐渐变大，但是此时，其left值与top值没有改变，故看似
jQuery滚动新闻实现代码 网上下载了一个Jquery新闻滚动Demo，效果不错。我根据自己情况，做了些调整。下载后，除了Html及Jquery.js,还有三个文件，分别是Css,主Js和一个定位Js（jqu
标签: 无序列表html
本文链接地址:https://www.jiuchutong.com/biancheng/385903.html 转载请保留说明！上一篇：jQuery图片渐变特效的简单实现(css图片渐变效果)
下一篇：jquery实现上传文件大小类型的验证例子(推荐)(jquery上传文件到服务器)
