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