前面转载过一片关于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数组排序学习的更多相关文章

  1. jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

    今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...

  2. Jquery插件学习

    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...

  3. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

  4. jQuery Mobile 学习

    jQuery Mobile 学习系列 http://blog.csdn.net/bao990423420/article/details/13995021

  5. jQuery EasyUI学习资源汇总

    jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...

  6. Jquery重新学习之七[Ajax运用总结A]

    Jquery中Ajax的运用是另外一个重点,平时项目经常会用它进行一些异步操作:其核心是通过XMLHttpRequest对象以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而 ...

  7. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  8. jQuery源代码学习_工具函数_type

    jquery源代码学习_工具函数_type jquery里面有一个很重要的工具函数,$.type函数用来判断类型,今天写这篇文章,是来回顾type函数的设计思想,深入理解. 首先来看一下最终结果: 上 ...

  9. jQuery源代码学习笔记_工具函数_noop/error/now/trim

    jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...

随机推荐

  1. PHP中通过加号合并数组

    通常,我们合并多个数组用的是array_merge()函数,其实,PHP手册中关于数组操作符的介绍给了我们更简单的方法,那就是"+"号,看看下面的例子就明白了(详细了解) 代码: ...

  2. Linux 之 最常用的20条命令

    玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了.当然你也可以在使用时去找一下 ...

  3. MySQL数据库索引的4大类型以及相关的索引创建

    以下的文章主要介绍的是MySQL数据库索引类型,其中包括普通索引,唯一索引,主键索引与主键索引,以及对这些索引的实际应用或是创建有一个详细介绍,以下就是文章的主要内容描述. (1)普通索引 这是最基本 ...

  4. 动态设置Div坐标

    <style type="text/css"> #main{text-align:center; background-color:#9FF; height:600px ...

  5. 【转】如何修改Chrome缓存目录的地址

    本文转自:http://www.nowamagic.net/librarys/veda/detail/2573 C盘空间越来越小,在Win7里还标红了,心里看得不舒服,得想一些方法腾出一些空间.看了A ...

  6. java 和 objective-c 动态获得类型信息

    详细信息,请参看android官方文档中的class类的介绍 ,和苹果的官方文档Objective-C Runtime Reference java中常常听到反射reflection,在java的cl ...

  7. VirtualBox 虚拟 Ubuntu 的一些感想

    之前有说过最近在学习Shell,公司及家里的电脑目前都是Windows系统,进行shell学习主要是用一些模拟linux环境的软件,比如banbun.cygwin banbun的功能很强大,集成了oh ...

  8. [Java基础] SequenceInputStream输入合并流

    转载: http://blog.csdn.net/xuefeng1009/article/details/6955707 public SequenceInputStream(Enumeration& ...

  9. CentOS 5.8/6.7若干优化

    CentOS系统安装之后并不能立即投入生产环境使用,往往需要先经过我们运维人员的优化才行.在此讲解几点关于Linux系统安装后的基础优化操作.注意:本次优化都是基于CentOS(5.8/6.7). 下 ...

  10. 谈Web前端安全编码

    最近开发中涉及到有关输出正确的HTML标签这样的问题,正好对字符编码这块儿多看看,之前对这个方面认识的不深,思考的确实不够,如果下次再碰见类似的问题,若再次不少时间去调研的花,就得不偿失了. 就像正则 ...