位置: 编程技术 - 正文

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值。

jQuery实现对无序列表的排序功能(附demo源码下载)(无序列表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上传文件到服务器)

  • 小规模企业需要交哪些税
  • 餐饮业小规模开发票开什么
  • 经济补偿影响下份工作吗
  • 23年一般纳税人税收政策是什么
  • 小规模结转成本的会计分录怎么写
  • 母子公司的关联交易怎么看
  • 包工包料怎么付款流程
  • 咨询费开发票选哪一项
  • 企业所得税报税日期
  • 增值税专用发票电子版
  • 商品流通企业应收账款很少的原因
  • 股份支付费用的会计处理怎么做?
  • 资产剥离类型
  • 已认证发票红冲进项税分录
  • 工业企业哪些房子要交房产税
  • 补缴税款会计处理
  • 沙特将开征增值税和特殊商品消费税
  • 未计提工资
  • 医院会计制度准则
  • 投资收益企业所得税预缴
  • 建筑工程分包怎么纳税
  • 老板垫付的货款怎么做凭证?
  • windows10 20h2 2004
  • Win11 Build 22000.132 预览版 ISO 官方镜像下载与安装
  • 本年收益在借方还结转吗
  • 房租没有发票,怎么入费用?
  • 企业之间的往来款现金流
  • 二手固定资产使用年限
  • php中字符串函数
  • chrome新建标签为打开特定网页
  • vue public assets
  • php文件注释标记是什么
  • 划入账户金额
  • 厂房押金不退怎么要回来
  • 非上市公司股票期权个人所得税
  • 外贸企业出口退税流程(详细步骤)
  • 购入专利权属于
  • 一年的云信承兑汇票如何提现
  • php反转
  • framework core
  • 2023年会出什么车
  • 计算工业总产值公式
  • 退税是上一年交的税都会退吗
  • 公司名下商品房过户给公司需要交过户费
  • 当月银行账可以下个月做吗
  • 织梦模板首页logo修改
  • 收到以前年度增值税退税账务处理怎么做账
  • 一般纳税人废业企业库存怎么办
  • 报销业务招待费是什么凭证
  • 税金及附加怎么做分录
  • 物业公司物业费税率是多少
  • 一般纳税人税率2023
  • 高速公路费如何查询
  • 房产税的纳税人包括
  • 社会保险与商业人身保险的区别有
  • 事业单位跨年度错账调整
  • 年终奖能算在工资里吗
  • 奖励员工购物卡怎么写
  • 资产负债表和科目余额表怎么核对
  • 机票价格分类
  • 哪些合同不受法律保护
  • 基金会对外捐赠,对方开什么发票
  • 投资的公司注销了怎么做账
  • mysql 5.6 从陌生到熟练之_数据库备份恢复的实现方法
  • win10 Realtek HD Audio更新失败怎么办 win10关闭UAC解决Realtek HD Audio更新失败
  • ubuntu14.4安装教程
  • linux批处理文件怎么写
  • windows的气泡屏保会加速
  • win7本地磁盘图标变了
  • 定制xp系统
  • win8.1启动设置
  • win8桌面在c盘的路径
  • jquery实战
  • android item属性
  • 如何删掉win7系统
  • shell脚本中判断grep的结果
  • python引用和调用有什么不同
  • 顺丰快递的开票历史如何删除
  • 查询如何查询
  • 预测收入遵循什么方法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设