`
脑壳冒星星
  • 浏览: 15670 次
文章分类
社区版块
存档分类
最新评论

Jquery为对象数组排序

 
阅读更多
假设以对象数组形式来存储学生信息。每个学生包含对象3个属性:role、name和emailid。基于属性role为该数组排序。

<h3>List of students is </h3> <p class="listofstud"></p>

编写jquery代码来创建一个对象数组,存储3个学生的信息。每个学生对象包含属性role、name和emailid。同时需要编写代码,执行基于学生对象role属性的排序。jquery代码如下:
<script language="javascript">

$(document).ready(function(){

var students=[

{

"role":1,

"name":"s-Ben",

"emailid":"ben@gmail.com"

},

{

"role":2,

"name":"s-Ian",

"emailid":"ian@gmail.com"

},

{

"role":3,

"name":"s-Caroline",

"emailid":"caroline@gmail.com"

}

];

students = students.sort(function(a,b){

return b.role-a.role;

});

$.each(students,function(index,value){

$('table.listofstud').append

"<tr><td>"+value.role+"</td><td>"+value.name+"</td><td>"+value.emailid+"</td></tr>");

);

});

</script>

如果要按照属性name的字母顺序为数组排序,就必须替换前面的sort()函数,如下所示:

students = students.sort(function(a,b){ if (a.name<b.name) {return -1}; if (a.name>b.name) {return 1}; });

在sort()方法中,需要添加比较函数,反复从数组中获取一对值,在比较的基础上返回小于0、等于0和大于0的值。攻略2.4描述了基于什么返回这些值。

在示例的比较函数中,比较学生对象的role属性和。该比较函数中返回值如下:

return b.role-a.role;

这意味着该函数将按照role属性降序排序。

此后,使用each()方法来解析每个数组元素,并通过回调函数对它们进行处理。在回调函数中每个数组元素的属性,也就是role、name和emailid,包围在<td>和</td>之间显示。这意味着,在表格的单独行(即表格数据元素)中存储不同的数组的元素,而以列的形式显示数组元素的各个属性。其结果是,最终以表格形式显示对象数组。

如果按照name属性排序,则在比较函数中基于students对象的name属性进行比较。如果第一个元素的name属性小于(按照ASCII值)第二个元素的name属性,则该函数返回-1,反之则返回1。其结果是基于name属性对学生对象数组进行排序。
分享到:
评论

相关推荐

    js对象数组按属性快速排序

    按所推荐的程序在IE下跑了下,的确,排序耗时很小。 代码如下: [removed] /* * 洗牌 */ function getRandomPlayCard(m){ var array1=new Array(m); for(var i=0;i&lt;m;i++){ var rnd=Math.floor(Math.random()*(i+0...

    js,jQuery 排序的实现代码,网页标签排序的实现,标签排序

    js,jQuery 排序的实现: 重点: 想要实现排序,最简单的方法就是 先把标签用jQuery读进对象数组 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用对象数组内容覆盖网页上的标签...

    利用jQuery对无序列表排序的简单方法

    该函数取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,实际上是元素数组)。其语法形式如下: object.get() 注:如果你想要直接操作DOM对象而不是jQuery对象,这个函数非常有用。 (2)jQuery函数text

    JQuery权威指南源代码

    控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用...

    jQuery实现对无序列表的排序功能(附demo源码下载)

    本文实例讲述了jQuery实现对无序列表的排序功能。...该函数取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,实际上是元素数组)。其语法形式如下: object.get() 注:如果你想要直接操作

    超实用的jQuery代码段

    9.7 实现JSN对象数组的排序 9.8 将12343778转成12.343.778的形式 9.9 模拟抽奖程序 9.10 实现冒泡算法 9.11 查询数组中特定数值 9.12 从数组中移除特定数值 9.13 根据指定正则表达式识别超链接 9.14 验证Email地址的...

    jQuery权威指南-源代码

    书名:jQuery权威指南(系统介绍jQuery方方面面,囊括118个实例和2个综合案例,实战性强) 作者:陶国荣 著 ...10.8.2 DOM对象与jQuery对象的类型转换/335 10.9 本章小结/337 第11章 综合案例开发...

    jQuery攻略.pdf

    只显示所需的数据 19 2.4 字符串数组和数值数组的排序 22 2.5 拆分数组 24 2.6 合并数组 26 2.7 把数值数组转换成字符串,并查找其子字符串 27 2.8 创建对象数组 28 2.9 为对象数组排序 30 2.10 小结 32 第3章 事件...

    jQuery权威指南366页完整版pdf和源码打包

    10.5.1 jquery在其他库前导入 10.5.2 jquery在其他库后导入 10.6 使用子查询优化选择器性能 10.7 减少对dom元素直接操作 10.8 正确区分dom对象与jquery对象 10.8.1 dom对象与jquery对象的定义 10.8.2 ...

    韩顺平PHP JS JQUERY 所有视频下载种子 货真价实

    9-28 2 二维数组的定义使用 数组排序 9-28 3 顺序查找 二分查找 9-28 4 javascript面向对象编程 9-28 5 javascript对象存在形式 9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程...

    分享一个自己写的table表格排序js插件(高效简洁)

    像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法,就没有使用)、原生态js的table... 说写就写,table排序其实很简单:就是取出所有排序列的值并存放在数组中(并且各列对应行对象也存放到一个数组中),

    50个必备的实用jQuery代码段

    1. 如何创建嵌套的过滤器: 3 ...47. 如何使用jQuery来为事件指定命名空间: 12 48. 如何检查cookie是否启用 12 49. 如何让cookie过期: 12 50. 如何使用一个可点击的链接来替换页面中任何的URL 12

    Java代码开发斗地主游戏全代码

    用一千多行Java代码实现的斗地主游戏,后端使用的技术栈是Springboot+SpringCache+Websocket,项目中运用了Java基础及面向对象的各类技术,类、接口、对象、枚举、集合、Map、数组、排序、算法、缓存等都有使用........

    JavaScript基础教程第8版

    16.1 以jQuery为基础 306 16.2 使用ThemeRoller定制外观 307 16.3 在页面中添加日历 309 16.4 拖放元素 313 16.5 使用jQuery处理外部数据 316 16.6 使用jQuery插件 322 第17章 bookmarklet 328 17.1...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    javascript数组和字典以及for循环 javascript条件语句 javascript函数的定义 Dom直接选择器 Dom间接选择器 示例之模态对话框 示例之全选和反选以及取消 javascript必须加分号 示例之后台管理左侧菜单 今日内容梳理 ...

    TinySort:TinySort是一个小的脚本,用于对HTML元素进行排序。 它按文本或属性值或其中一个子项的值进行排序

    第一个(也是唯一必需的)参数是 ,HTMLElements数组或字符串(使用document.querySelectorAll将其转换为NodeList)。 tinysort ( NodeList ) ; 其他参数可以是一个选项对象。 tinysort ( NodeList , { place : '...

    史上最全韩顺平传智播客PHP就业班视频,10月份全集

    9-28 2 二维数组的定义使用 数组排序 9-28 3 顺序查找 二分查找 9-28 4 javascript面向对象编程 9-28 5 javascript对象存在形式 9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程...

    (全)传智播客PHP就业班视频完整课程

    9-28 2 二维数组的定义使用 数组排序 9-28 3 顺序查找 二分查找 9-28 4 javascript面向对象编程 9-28 5 javascript对象存在形式 9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程...

    史上最全传智播客PHP就业班视频课,8月份视频

    9-28 2 二维数组的定义使用 数组排序 9-28 3 顺序查找 二分查找 9-28 4 javascript面向对象编程 9-28 5 javascript对象存在形式 9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程...

    史上最全韩顺平传智播客PHP就业班视频,9月份全集

    9-28 2 二维数组的定义使用 数组排序 9-28 3 顺序查找 二分查找 9-28 4 javascript面向对象编程 9-28 5 javascript对象存在形式 9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程...

Global site tag (gtag.js) - Google Analytics