web无序列表去掉点_无序列表排序之方法

利用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库引入进来:

然后,添加完整代码:

$(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);

});

});

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/431298.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言编程怎么实现替换,使用C语言实现字符串中子字符串的替换

描述&#xff1a;编写一个字符串替换函数&#xff0c;如函数名为 StrReplace(char* strSrc, char* strFind, char* strReplace)&#xff0c;strSrc为原字符串&#xff0c;strFind是待替换的字符串&#xff0c;strReplace为替换字符串。举个直观的例子吧&#xff0c;如&#xff…

数据结构:点之间的最短距离--Floyd算法

Floyd算法 Floyd算法 Dijkstra算法是用于解决单源最短路径问题的&#xff0c;Floyd算法则是解决点对之间最短路径问题的。Floyd算法的设计策略是动态规划&#xff0c;而Dijkstra採取的是贪心策略。当然&#xff0c;贪心算法就是动态规划的特例。 算法思想 点对之间的最短路径仅…

shell 获取家目录_一篇教会你写90%的shell脚本

shell是外壳的意思&#xff0c;就是操作系统的外壳。我们可以通过shell命令来操作和控制操作系统&#xff0c;比如Linux中的Shell命令就包括ls、cd、pwd等等。总结来说&#xff0c;Shell是一个命令解释器&#xff0c;它通过接受用户输入的Shell命令来启动、暂停、停止程序的运行…

数据结构c语言版第四章题库,数据结构(C语言版)(第4版)习题

数据结构(C语言版)(第4版)习题 习题 11.1 选择题。(1)计算机识别、存储和加工处理的对象统称为 。A&#xff0e;数据 B.数据元素 C.数据结构 D.数据类型(2)数据结构通常是研究数据的 及它们之间的联系。A&#xff0e;存储和逻辑结构 B.存储和抽象 C.理想和抽象 D.理想和逻辑(3)…

C++刷称号——2707: 素数与要素

Description 从键盘输入的随机整数n&#xff0c;如果n不是质数&#xff0c;然后计算n所有的因素&#xff08;不含1&#xff09;。例如&#xff0c;对于16&#xff0c;出口2,4,8&#xff1b;否则输出“It is a prime number.” 推断素数和需求因素已完成功能。 Input 随机整数n …

通州区机器人比赛活动总结_马驹桥镇中心小学在2017通州区青少年机器人竞赛中勇创佳绩...

2017年2月26日&#xff0c;北京市通州区马驹桥镇中心小学在“2017通州区青少年机器人竞赛”中取得优异的成绩。来自通州区29所中小学的218选手参加了此次比赛&#xff0c;共有6项机器人挑战赛&#xff1a;ASC项目、WER项目、FLL项目、综合技能项目、VEX项目、创意项目。马驹桥镇…

python opencv输出mp4_Python玩转视频处理(四):视频按场景进行分割

在上一篇文章&#xff08;python在手&#xff0c;女神视频轻松有&#xff09;分享了用AI人脸识别技术标记人物出现时间点来截取视频片段的教程&#xff0c;它的局限性在于只能通过识别特定的对象&#xff08;比如人脸&#xff09;来操作。在本文中将分享一个按场景进行分割视频…

lvm 扩展根目录_转://如何增加linux根目录的磁盘空间(基于LVM)?

问题引出&#xff1a;在测试过程中替换so文件&#xff0c;报磁盘空间不足的错误。▲问题分析&#xff1a;由于当时系统部署架构的考虑&#xff0c;把软件和数据库部署在了同一台机器上&#xff0c;并且给了30G的磁盘空间。系统上占用磁盘空间的有2部分&#xff0c;一是软件本身…

图形基本变换c语言代码,图形变换-C语言课程设计.doc

学号《》课程设计报告图形变换网络工程班级&#xff1a;16(3)姓名&#xff1a;指导教师&#xff1a;成绩&#xff1a;计算机学院2017 年 5月 10日目录- 1 -1 设计要求- 2 -2 程序功能- 2 -3 核心算法- 2 -4 程序代码- 2 -5 运行结果- 2 -6 程序创新说明- 3 -参考文献- 3 -C语言…

stm32 isp下载官方软件android_OpenCanvas免费版下载_OpenCanvas绘图软件官方版下载7.0.25...

OpenCanvas 是一款小巧的CG手绘软件&#xff0c;让用户在使用数位板在电脑上绘图时&#xff0c;就像是在纸上手绘一样&#xff0c;可以画出极为细致的图像。OpenCanvas功能简捷、体积小巧、运行速度快&#xff0c;大家可以很快上手&#xff0c;非常适合入门级手绘爱好者使用。对…

centos7限制cpu使用_CentOS7 CPU隔离配置

1. 修改grubCentOS7中grub存放位置在&#xff1a;/etc/default/grub初始内容如下&#xff1a;1 [rootdellserver default]# catgrub2 GRUB_TIMEOUT53 GRUB_DISTRIBUTOR"$(sed s, release .*$,,g /etc/system-release)"4 GRUB_DEFAULTsaved5 GRUB_DISABLE_SUBMENUtrue…

c语言solaris中图形库,成功弄出simics下的CDE登录界面,与大家分享

simics下的cde可以在安装的时候&#xff0c;就启动图形console进行安装&#xff0c;让installer自动配置图形console&#xff0c;也可以先用默认的text console进行安装&#xff0c;之后再进行配置。我用的方法是先用text console安装&#xff0c;安装完成后再启动图形console。…

【转】图文详解YUV420数据格式

YUV格式有两大类&#xff1a;planar和packed。 对于planar的YUV格式&#xff0c;先连续存储所有像素点的Y&#xff0c;紧接着存储所有像素点的U&#xff0c;随后是所有像素点的V。对于packed的YUV格式&#xff0c;每个像素点的Y,U,V是连续交*存储的。 YUV&#xff0c;分为三个分…

python安装pip_在MAC下安装pip,并关联到相应的python版本

在MAC下安装pip&#xff0c;并关联到相应的python版本 博客说明 文章所涉及的资料来自互联网整理和个人总结&#xff0c;意在于个人学习和经验汇总&#xff0c;如有什么地方侵权&#xff0c;请联系本人删除&#xff0c;谢谢&#xff01; 说明 不多说了&#xff0c;说就是电脑重…

java台球游戏设计原理_台球游戏的核心算法和AI(1)

前言:08年的时候, 写过一个台球游戏, 用的是java, 不过代码真的是用传说中的神器notepad写的(你信吗? 其实是用GVIM写的, ^_^), 很多类都在同一java文件中编写. 可见当时的JAVA水平真的不咋地, 时过进迁, 还是一样的不咋地.这边是当时的CSDN下载链接: java(台球游戏), 实现比较…

murmurhash

http://www.oschina.net/translate/state-of-hash-functions http://calvin1978.blogcn.com/articles/murmur.html https://zh.wikipedia.org/wiki/Murmur%E5%93%88%E5%B8%8C http://www.trueeyu.com/?p1325转载于:https://www.cnblogs.com/LyonLys/p/murmurhash.html

cat命令详解_好程序员Python培训之详解eval好与坏

好程序员Python培训之详解eval好与坏&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值&#xff0c;下面我们一起来看一下吧。eval是Python的一个内置函数&#xff0c;这个函数的作用是&#xff0c;返回传入字符串的表达式的…

对代理商的评价怎么写_简历中的自我评价怎么写才能更吸引人?

有统计报告显示&#xff1a;HR每天看到的职位简历至少1000&#xff0c;每封简历的停留时间不过10秒。在这么短的时间内&#xff0c;让hr印象深刻&#xff0c;自我评价的价值就出现啦&#xff01;不少人认为自我评价要幽默风趣&#xff0c;例如&#xff1a;“您都看到这儿了&…

thinkphp小技巧

thinkphp小技巧 if(IS_POST) _404("页面不存在",U("index")) //如果不是POST提交&#xff0c;则跳转到index。debug模式中不跳转&#xff0c;显示string。 if(IS_POST) halt("页面不存在") //更详…

android ui状态栏高度,Android--状态栏高度,导航栏高度,Window高度,DecorView高度,heightPixels...

1:DecorView的高度DecorView的高度代表的是: 整个装饰窗口的高度, 这个高度包括:状态烂的高度和导航栏的高度.(状态栏和导航栏通常叫做装饰窗口, 而ActionBar不属于装饰窗口)这个高度, 可以代表着整个玻璃屏幕的高度.2.Window的RootView的高度RootView的获取方式:getWindow().f…