如何在jQuery中使用自定义排序顺序对列表项进行排序
How to sort list items using custom sort order in jQuery
我的问题与我在Stack Overflow上发现的许多其他问题非常相似,但不完全相同。
我想根据每个项目中包含的跨度的内容对列表项目进行排序,但要使用我可以定义的排序顺序。以下是示例列表项的HTML:
<li>
<span class="fname">John</span>
<span class="lname">Doe</span>
<span class="year">Sophomore</span>
</li>
我想根据"年"跨度的内容进行排序,但要按时间顺序而不是按字母顺序。显然,订单必须是:
- 大一新生
- 大二学生
- Junior
- 高级
我该怎么做?
仅供参考,我使用以下jQuery代码(非常有效(按姓氏字母顺序排序:
function sortByLastName(){
var myList = $('#foo ul');
var listItems = myList.children('li').get();
listItems.sort(function(a,b){
var compA = $(a).find('.lname').text().toUpperCase();
var compB = $(b).find('.lname').text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
});
$(myList).append(listItems);
};
要匹配sortByLastName((函数,这将起作用:
function sortByYear(){
var myYears = ['Freshman', 'Sophomore', 'Junior', 'Senior'];
var myList = $('#foo ul');
var listItems = myList.children('li').get();
listItems.sort(function(a,b){
var compA = $.inArray($(a).find('.year').text(), myYears);
var compB = $.inArray($(b).find('.year').text(), myYears);
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
});
$(myList).append(listItems);
}
只需使用$.inArray((在数组中查找每个学年的索引。请注意,对于在数组中找不到的值,这将返回-1,这将把这些元素放在列表的顶部。
一个简单的方法是创建一个具有期望值的数组。
var years=['Freshman', 'Sophomore', 'Junior', 'Senior' ];
然后在对元素进行排序时,比较索引。
listItems.sort(function(a,b){
var indexA = $.inArray( $(a).find('.year').text(), years );
var indexB = $.inArray( $(b).find('.year').text(), years );
return ( indexA < indexB) ? -1 : ( indexA > indexB) ? 1 : 0;
});
您必须更改排序标准回调。像这样:
function sortByLastName(){
var myList = $('#foo ul');
var listItems = myList.children('li').get();
var scores = {
"FRESHMAN": 0, "SOPHOMORE": 1, "JUNIOR": 2, "SENIOR": 3
};
listItems.sort(function(a,b){
var compA = $(a).find('.lname').text().toUpperCase();
var compB = $(b).find('.lname').text().toUpperCase();
compA = scores[compA]; compB = scores[compB]; //Sort by scores instead of values
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
});
$(myList).append(listItems);
};
希望这能帮助
相关文章:
- 2个backbone.js集合,具有相同的模型,但排序顺序不同
- 如何使用下划线根据自定义排序顺序对对象数组进行排序
- 如何根据不同排序顺序的多个值对json对象进行排序
- 如何使用Jquery Data表更正排序顺序
- 使用Async.js sortBy的升序与降序排序顺序
- 如何在Jquery中使用给定的任何特定排序顺序对字符串数组进行排序
- JavaScript 排序顺序错误
- 如何在 select2() 字段中保存排序顺序
- Jquery DataTable 组排序顺序
- 按可排序顺序获取所有文本区域内容
- 是否可以按当前排序顺序获取跨多个页面的所有 jqGrid 行
- 使用数组作为排序顺序
- 如何将其转换为排序顺序
- 打开 Graph API 排序顺序,或简单的 jQuery/JavaScript 排序
- 谷歌地图 API - 最近的点 - 更改排序顺序
- 如何保存排序顺序
- 反转角度中的排序顺序
- 迭代 JavaScript 集合并添加排序顺序
- 根据数字排序顺序更新自动重新排列HTML列表
- 在backbone.js中,如何使用新的模型数据更新视图,同时在没有完整渲染的情况下保持排序顺序