如何在 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，這將起作用：

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

Answer 3

您必須更改排序標准回調。 像這樣：

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

希望這可以幫助