首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Jquery替对象数组排序

2012-07-08 
Jquery为对象数组排序假设以对象数组形式来存储学生信息。每个学生包含对象3个属性:role、name和emailid。基

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属性对学生对象数组进行排序。

热点排行