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代码如下：

 1 <script>
 2 $(function(){
 3 var Arr=[1,3,2,54,23,7,4,8,65,232,124,23]
 4 Arr.sort(function(a,b){
 5     return a-b
 6     })
 7 var sHtml="<ul>";
 8 $.each(Arr,function(i,val){    
 9     sHtml+="<li >"+val+"</li>"
10     })
11 sHtml+="</ul>"
12 $("#content").append(sHtml)
13 })
14 </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}]

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
 7 </script>
 8 <style>
 9 *{margin:0px;padding:0px}
10 #content{width:95%;margin:10% auto}
11 ul{display:flex;margin:0px auto;flex-flow: row wrap;}
12 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}
13 </style>
14 </head>
15 
16 <body>
17 <script>
18 $(function(){
19     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}]
20     Arr.sort(function(a,b){
21         return a.height-b.height
22         })
23     var sHtml="<ul>";
24     $.each(Arr,function(i,val){    
25         sHtml+="<li >"+val.font+val.height+"</li>"
26         })
27     sHtml+="</ul>"
28     $("#content").append(sHtml)
29 })
30 </script>
31 
32 <div id="content"></div>
33 </body>
34 </html>

 

注意第20-23行，道理是一样的，找出我们要排序的依据，然后进行比较，结果如下：

 

posted @ 2015-05-26 01:28  走在起点  阅读(611)  评论(0)  编辑  收藏  举报