我的业务是根据距离的远近经行一个排序;

第一种方法:冒泡排序

排序前的数据是这样子的:

排序后是这样子的:

代码可以直接复制使用的:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body> <script type="text/javascript">
$(function(){
var _arrayList=new Array();
var _newArrayList=new Array(); _arrayList[0]={"id":1,"name":"张三","distance":100};
_arrayList[1]={"id":2,"name":"李四","distance":120};
_arrayList[2]={"id":3,"name":"王武","distance":80};
_arrayList[3]={"id":4,"name":"二狗","distance":40};
_arrayList[4]={"id":5,"name":"屎蛋","distance":160}; for(var i=0;i<_arrayList.length;i++)
{
for(var u=i+1;u<_arrayList.length;u++)
{
if(parseFloat(_arrayList[i]["distance"])>parseFloat(_arrayList[u]["distance"]))
{
var num=[];
num=_arrayList[i];
_arrayList[i]=_arrayList[u];
_arrayList[u]=num; }
}
}
console.log(_arrayList); });
</script>
</body>
</html>

第二种方法:JavaScript sort()

经过网友的介绍知道了这个set方式,太好用了!

直接上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div>
<table>
<thead>
<tr>
<td>Id</td>
<td>姓名</td>
<td>距离(米)</td>
</tr>
</thead>
<tbody id="arrayDiv">
<tr><td></td><td></td><td></td></tr>
</tbody>
</table>
</div>
<script> $(function () {
var result = [
{ "id": 1, "name": "张三", "distance": 100 },
{ "id": 2, "name": "李四", "distance": 120 },
{ "id": 3, "name": "王武", "distance": 80 },
{ "id": 4, "name": "二狗", "distance": 40 },
{ "id": 5, "name": "屎蛋", "distance": 160 }
];
function sortId(a, b) {
return a.distance - b.distance;//由低到高
//return b.distance - a.distance;//由高到低
}
result.sort(sortId);
console.log(result);
var _html = "";
for (var i = 0; i < result.length; i++) {
_html += "<tr><td>" + result[i].id + "</td><td>" + result[i].name + "</td><td>" + result[i].distance + "</td></tr>";
}
$("#arrayDiv").html(_html);
});
</script>
</body>
</html>

这是运行效果

最新文章

  1. js 常用函数收集(基础)
  2. 分享使用Entity Framework的一个坑:Include无效
  3. HDU 5894 hannnnah_j’s Biological Test (组合数学) -2016 ICPC沈阳赛区网络赛
  4. 比较数据泵和exp/imp对相同数据导出/导入的性能差异
  5. linux学习之系统管理、网络配置、软件安装
  6. VM设置BIOS延长时间
  7. eclipse打包jar文件(含外部jar包)的方法
  8. css的使用技巧资料
  9. Icon specified in the Info.plist not found under the top level app wrapper: Icon.png
  10. Qt 第一步,环境搭建与测试
  11. NET设计模式(2):单件模式(Singleton Pattern)[转载]
  12. jdk8新特性之lambda expressions
  13. 纯Python综合图像处理小工具(2)图像增强
  14. smali插入log,打印变量
  15. 第一章 Java程序设计概述
  16. Tomcat集成Memcached Session Manager方案
  17. PHP Kohana入门体验教程
  18. Openwrt配置小记
  19. vue-cli 搭建的项目处理不同环境下请求不同域名的问题
  20. Linux+Nginx+Asp.net Core及守护进程部署

热门文章

  1. Loadrunner学习资料
  2. [硬件]超能课堂(181):我们为什么需要4+8pin CPU供电接口?
  3. Python——Mysql
  4. 深度学习之前期准备工作--python,pip,numpy,tensorflow安装
  5. bootstrapValidator操作
  6. Magento2 Service contracts 服务合同
  7. Linux端口被占用的解决(附Python专版)
  8. Vue+koa2开发一款全栈小程序(6.个人中心)
  9. jmeter将上一个接口返回值作为下一个接口的请求参数
  10. 09--STL关联容器(map/multimap)