利用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="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>

以上代码通过数组排序并重新填充无序列表使得列表项有序。

具体效果如图4.11所示。

以上就是小编为大家带来的利用jQuery对无序列表排序的简单方法全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • 基于JQuery的列表拖动排序实现代码

    要求 拖动排序,从名字就不难想像,就是按住一行数据拖到想要的排序位置,保存新的排序队列. 思路 首先给列表行建立锚点,绑定mousedown和mouseup事件,当鼠标移动到想要插入的位置时,将对象行移动到目标行,然后对其经过的所有行进行排序处理. 思路很简单,但这里面仍然有几个问题要注意 1.移动到什么位置可以视作要插入到目标行的位置.2.移动出了顶端和底端时,判断为第一和最后.3.向上移动和向下移动的处理 解决 关于事件 Javascript里鼠标按下和放开事件为onmousedown,on

  • 针对后台列表table拖拽比较实用的jquery拖动排序

    现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码,很简单: 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title>

  • jQuery EasyUI学习教程之datagrid点击列表头排序

    jQuery EasyUI学习教程之datagrid点击列表头排序

    这个示例展示如何排序datagrid通过点击列表头. 在datagrid的所有columns 可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除非你设置sortable 属性为true 创建an DataGrid <table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid8_getdata.php&q

  • jQuery实现对无序列表的排序功能(附demo源码下载)

    jQuery实现对无序列表的排序功能(附demo源码下载)

    本文实例讲述了jQuery实现对无序列表的排序功能.分享给大家供大家参考,具体如下: 利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出.其中使用到的jQuery函数有ready().get().text().each().append()和JavaScript函数sort(). 1．jQuery函数介绍 (1)jQuery函数get()--获取匹配元素集合 该函数取得所有匹配元素的一种向后兼容的方式(不同于j

  • 利用jQuery对无序列表排序的简单方法

    利用jQuery对无序列表排序的简单方法

    利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出.其中使用到的jQuery函数有ready().get().text().each().append()和JavaScript函数sort(). 1．jQuery函数介绍 (1)jQuery函数get()--获取匹配元素集合 该函数取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,实际上是元素数组).其语法形式如下: object.get() 注:如

  • ASP.NET批量操作基于原生html标签的无序列表的三种方法

    在网页开发中,经常要用到无序列表.事实上在符合W3C标准的div+css布局中,无序列表被大量使用,ASP.NET虽然内置了BulletedList控件,用于创建和操作无序列表,但感觉不太好用.本篇介绍服务器端ASP.NET批量操作基于原生html标签的无序列表的三种方法. 方法一,将li元素做成html控件,加上id,用FindControl方法. aspx代码: <form id="form1" runat="server"> <ul>

  • jQuery判断是否存在滚动条的简单方法

    利用jQuery控制滚动条滚动,再判断滚动条是否有偏移.如果有,则存在滚动条,相反没有滚动就不存在. <script type="text/javascript"> $(function(){ $("body").scrollTop(10);//控制滚动条下移10px if( $("body").scrollTop()>0 ){ alert("有滚动条"); }else{ alert("没有滚动条&

  • python给list排序的简单方法

    大家有没有发现,当在网站上检索,想找到的内容,输入一个关键词时,检索栏下会出现输入关键词的拓词和问题.输入的关键词越多,越有可能找的你想要的问题.其实会出现这种情况是由于计算机算法的排序,会根据关键词关联.搜索量等原因排序.那你知道在python中如何给列表排序吗?今天,小编教教大家如何给列表排序. sort()方法 会对list中元素按照大小进行排序 list.sort(key=None,reverse=False) 实例: In [57]: l=[27,47,3,42,19,9] In [5

  • MySQL利用索引优化ORDER BY排序语句的方法

    创建表&创建索引 create table tbl1 ( id int unique, sname varchar(50), index tbl1_index_sname(sname desc) ); 在已有的表创建索引语法 create [unique|fulltext|spatial] index 索引名 on 表名(字段名 [长度] [asc|desc]); MySQL也能利用索引来快速地执行ORDER BY和GROUP BY语句的排序和分组操作. 通过索引优化来实现MySQL的ORDER

  • jquery拖拽自动排序插件使用方法详解

    本文为大家分享了jquery拖拽自动排序插件,供大家参考,具体内容如下 该插件并不是原生js写的,是基于jquery的,想看原生的话,请绕道而行. html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javas

  • Python列表排序 list.sort方法和内置函数sorted用法

    很多时候我们获取到一个列表后,这个列表并不满足我们的需求,我们需要的是一个有特殊顺序的列表. 这时候就可以使用list.sort方法和内置函数sorted,本文就是介绍list.sort方法和sorted内置函数的使用方法和区别. 一.list.sort方法 list.sort方法会就地排序列表,也就是说不会把原列表复制一份.这也是这个方法的返回值是None的原因,提醒您本方法不会新建一个列表. 在这种情况下返回None其实是Python的一个惯例:如果一个函数或者方法对对象进行的是就地改动,那

  • jquery.tableSort.js表格排序插件使用方法详解

    jquery.tableSort.js表格排序插件使用方法详解

    本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下 1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $("#mytable").tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了 参考:http://www.jb51.net/article/105217.htm <!DOCTYPE html> &

  • 利用jQuery 实现GridView异步排序、分页的代码

    每次请求备份管理页面时,服务端会把所以的备份还原信息都传到客户端,然后ui.tabs将两种信息折叠起来分别显示,好在ui.tabs给我提供ajax功能,我们的每个tab可以直接应用另外一个页面 如: 复制代码 代码如下: <div id="container"> <ul> <li><a href="#fragment-1"><span>备份</span></a></li>

  • 利用jquery去掉时光轴头尾部线条的方法实例

    利用jquery去掉时光轴头尾部线条的方法实例

    前言 以前做类似时光轴的结构,几乎都是一条灰色线飞流直下,没有尽头.今天这个线条是从第一个圆点到最后一个圆点,那么问题来了,内容的高度还不是固定的,线条的长度怎么确定?怎么就能刚刚好从第一个点到最后一个点首尾相连呢?这就是下面所要做的. 先看效果,如下图: 思路: 1.写一个div包住整个内容,就能知道所有列表的总高度: 2.写一条细线定位到右边,对,高度100%,内容多高,细线就多高: 3.开始的小点距离顶部多高,细线就距离顶部多高: 4.使用js设置细线的高度 = 总高度 - 最后一个列表的

随机推荐