javascript 如何在 jQuery 中使用自定义排序顺序对列表项进行排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6591556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to sort list items using custom sort order in jQuery
提问by 40 Degree Day
My question is very similar to a number of others I've found on Stack Overflow, but not quite the same.
我的问题与我在 Stack Overflow 上发现的许多其他问题非常相似，但并不完全相同。
I'd like to sort list items based on the content of a span contained within each item -- but using a sort order that I can define. Here's the HTML for a sample list item:
我想根据每个项目中包含的跨度的内容对列表项目进行排序——但使用我可以定义的排序顺序。这是示例列表项的 HTML：
<li>
<span class="fname">John</span>
<span class="lname">Doe</span>
<span class="year">Sophomore</span>
</li>
I want to sort based on the content of the "year" span, but chronologically rather than alphabetically. The order, obviously, needs to be:
我想根据“年份”跨度的内容进行排序，但按时间顺序而不是按字母顺序排列。显然，订单必须是：
- Freshman
- Sophomore
- Junior
- Senior
- 大一新生
- 二年级
- 初级
- 高级的
How can I do this?
我怎样才能做到这一点？
Just for reference, I'm using the following jQuery code (which works perfectly) to sort alphabetically by last name:
仅供参考，我使用以下 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);
};
回答by jaredbranum
To match your sortByLastName() function, this would work:
要匹配您的 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);
}
Just use $.inArray()to find the indices of each school year within the array. Note that this will return -1 for values not found in the array, which will put those elements at the top of your list.
只需使用$.inArray()来查找数组中每个学年的索引。请注意，这将为数组中未找到的值返回 -1，这会将这些元素放在列表的顶部。
回答by czarchaic
One simple way would be to create an array with your expected values.
一种简单的方法是使用您的预期值创建一个数组。
var years=['Freshman', 'Sophomore', 'Junior', 'Senior' ];
Then when you sort your elements, compare indexes.
然后在对元素进行排序时，比较索引。
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;
});
回答by Edgar Villegas Alvarado
You have to change your sorting criterion callback. Like this:
您必须更改排序标准回调。像这样：
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);
};
Hope this helps
希望这可以帮助
