如何使用jQuery中的自定义排序顺序对列表项进行排序

Question

我的问题与我在Stack Overflow上发现的其他一些问题非常相似,但并不完全相同.

我想根据每个项目中包含的跨度内容对列表项进行排序 - 但是使用我可以定义的排序顺序.这是示例列表项的HTML:

<li>
    <span class="fname">John</span>
    <span class="lname">Doe</span>
    <span class="year">Sophomore</span>
</li>

我想根据"年"跨度的内容进行排序,但是按时间顺序而不是按字母顺序排序.显然,订单必须是:

• 新生
• 二年级
• 初级
• 前辈

我怎样才能做到这一点？

仅供参考,我使用以下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);
};

Answer 1

要匹配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,这将把这些元素放在列表的顶部.

Answer 2

一种简单的方法是使用您的期望值创建一个数组.

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;
});