jquery数组排序学习
前面转载过一片关于js数组的一些基本能操作方法，本文结合实例对数组排序做简要探讨。
首先看一实例，一般涉及到排序都是动态数据，现在我们自己新建一数组进行模拟。
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<style>
*{margin:0px;padding:0px}
#content{width:95%;margin:10% auto}
ul{display:flex;margin:0px auto;flex-flow: row wrap;}
li{width:100px;height:100px;line-height:100px;text-align:center;border:1px solid #666;list-style:none;margin-right:10px;margin-bottom:15px;font-size:48px}
</style>
</head>
<body>
<script>
$(function(){
var Arr=[1,3,2,54,23,7,4,8,65,232,124,23]
var sHtml="<ul>";
$.each(Arr,function(i,val){
sHtml+="<li >"+val+"</li>"
})
sHtml+="</ul>"
$("#content").append(sHtml)
})
</script> <div id="content"></div>
</body>
</html>
css比较简单，就是简单设置了边框，字体大一些，容易区分。。。这里需要说的是之前用过display:box实现多元素排列一行，不过使用过程中发现，如果父元素设置了display：box属性，则它的子元素是没法控制换行的 ，网上又说可以用box-lines解决，测了之后无果，最后也没解决这个问题，所以就换了display：flex属性 ，除了拼写，和box是很相像的，不过可以方便的设置换行~~
在js中，简单定义了一个数组，并通过each方法，显示到li中，最终结果如下图：
下面我们通过简单的设置来让元素从小到大排列：
js代码如下：
<script>
$(function(){
var Arr=[1,3,2,54,23,7,4,8,65,232,124,23]
Arr.sort(function(a,b){
return a-b
})
var sHtml="<ul>";
$.each(Arr,function(i,val){
sHtml+="<li >"+val+"</li>"
})
sHtml+="</ul>"
$("#content").append(sHtml)
})
</script>
sort（）方法是按照字符编码的顺序进行排序，我们可以方便的定义一个比较函数，如a<b，则a排在b的前面。
还是很听话的~~
思考下，如果是多维数组呢，比如像这样：
var Arr=[{"font":"宋体","height":20},{"font":"黑体","height":5},{"font":"书法体","height":2},{"font":"隶书","height":56},{"font":"小篆","height":13},{"font":"楷体","height":67},{"font":"行楷","height":34},{"font":"草书","height":18},{"font":"魏碑体","height":99},{"font":"幼圆","height":23},{"font":"霹雳体","height":12},{"font":"造字工坊","height":1}]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<style>
*{margin:0px;padding:0px}
#content{width:95%;margin:10% auto}
ul{display:flex;margin:0px auto;flex-flow: row wrap;}
li{width:100px;height:100px;line-height:100px;text-align:center;border:1px solid #666;list-style:none;margin-right:10px;margin-bottom:15px;font-size:20px}
</style>
</head> <body>
<script>
$(function(){
var Arr=[{"font":"宋体","height":20},{"font":"黑体","height":5},{"font":"书法体","height":2},{"font":"隶书","height":56},{"font":"小篆","height":13},{"font":"楷体","height":67},{"font":"行楷","height":34},{"font":"草书","height":18},{"font":"魏碑体","height":99},{"font":"幼圆","height":23},{"font":"霹雳体","height":12},{"font":"造字工坊","height":1}]
Arr.sort(function(a,b){
return a.height-b.height
})
var sHtml="<ul>";
$.each(Arr,function(i,val){
sHtml+="<li >"+val.font+val.height+"</li>"
})
sHtml+="</ul>"
$("#content").append(sHtml)
})
</script> <div id="content"></div>
</body>
</html>
注意第20-23行，道理是一样的，找出我们要排序的依据，然后进行比较，结果如下：
jquery数组排序学习的更多相关文章
- jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...
- Jquery插件学习
前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
- jQuery Mobile 学习
jQuery Mobile 学习系列 http://blog.csdn.net/bao990423420/article/details/13995021
- jQuery EasyUI学习资源汇总
jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...
- Jquery重新学习之七[Ajax运用总结A]
Jquery中Ajax的运用是另外一个重点,平时项目经常会用它进行一些异步操作:其核心是通过XMLHttpRequest对象以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而 ...
- jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
- jQuery源代码学习_工具函数_type
jquery源代码学习_工具函数_type jquery里面有一个很重要的工具函数,$.type函数用来判断类型,今天写这篇文章,是来回顾type函数的设计思想,深入理解. 首先来看一下最终结果: 上 ...
- jQuery源代码学习笔记_工具函数_noop/error/now/trim
jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...
随机推荐
- Delphi开发Windows服务程序
开发步骤: 1.New->Other->Service Application 2.现在一个服务程序的框架已经搭起来了 打开Service1窗口,有几个属性说明一下: AllowPause ...
- Eclipse常用快捷键与代码模板
Eclipse常用快捷键汇总 Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键.1. [ALT+/]此快捷键为用户编 ...
- 32.C++不能被继承的类[C++ Final Class]
[题目] 用C++设计一个不能被继承的类. [分析] 这是Adobe公司2007年校园招聘的最新笔试题.这道题除了考察应聘者的C++基本功底外,还能考察反应能力,是一道很好的题目. 在Java中定义了 ...
- iOS 中NSOperationQueue，Grand Central Dispatch ， Thread的上下关系和区别
In OS X v10.6 and later, operation queues use the libdispatch library (also known as Grand Central D ...
- phpmyadmin 主机名自动补全
2015年2月9日 14:29:25 新安装的phpmyadmin在登录界面中, 主机名的输入框没有自动补全功能, 导致每次都得手动输入ip地址 找到 phpmyadmin/libraries/aut ...
- 转数据库分库分表(sharding)系列(一) 拆分实施策略和示例演示
本文原文连接: http://blog.csdn.net/bluishglc/article/details/7696085 ,转载请注明出处!本文着重介绍sharding切分策略,如果你对数据库sh ...
- TinyXML 在vs2010 VC++使用
1.下载TinyXML http://www.grinninglizard.com/tinyxml/ 解压缩,将以下六个文件复制到您的工程项目文件(跟您的cpp文件在一个目录下)中 tinyxml ...
- 3.python基础补充（集合，collection系列，深浅拷贝）
一.集合 1.集合(set): 把不同的元素组成一起形成集合,是python基本的数据类型.集合元素(set elements):组成集合的成员 python的set和其他语言类似, 是一个无序不重复 ...
- DP:Multiplication Puzzle(POJ 1651)
卡片游戏 题目大意:给你一排卡片,你可以从从中抽一些卡片(但是不能抽最左和最右的卡片),每张卡片上有一个数字,当你从中抽出一张卡片后,你将得卡片的数字和卡片左右两张卡片的数字的乘积的分数,问当剩下最左 ...
- fcitx-sogoupinyin下载地址和安装
伴随着Deepin 12.12 beta的发布,搜狗输入法也与我们见面了.在发布前几日Deepiner也通过各种途径向我们展示了搜狗Linux输入法,当然也掉足了胃口. 来自官方的截图: 当然令很多U ...