华山资源网

jQuery实现对无序列表的排序功能(附demo源码下载)
网络编程 2024/11/20 佚名
3 1

本文实例讲述了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库引入进来：

<script language="JavaScript" src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js">


然后，添加如下排序功能代码：





<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实现对无序列表的排序功能(附demo源码下载)


完整实例代码点击此处本站下载。


更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》


希望本文所述对大家jQuery程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com