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

我的问题与我在堆栈溢出上发现的许多其他问题非常相似，但不完全相同

我希望根据每个项目中包含的范围的内容对列表项目进行排序——但使用我可以定义的排序顺序。以下是示例列表项的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);
};

函数sortByLastName（）{
var myList=$（'foo ul'）；
var listItems=myList.children（'li'）.get（）；
排序（函数（a，b）{
var compA=$（a）.find（'.lname'）.text（）.toUpperCase（）；
var compB=$（b）.find（'.lname'）.text（）.toUpperCase（）；
返回（compAcompB）？1:0；
});
$（myList）.append（listItems）；
};

一种简单的方法是创建一个包含预期值的数组

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

listItems.sort（函数（a，b）{
var indexA=$.inArray（$（a）.find（'.year'）.text（），years）；
var indexB=$.inArray（$（b）.find（'.year'）.text（），years）；
返回（indexAindexB）？1:0；
});

要匹配您的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);
}

函数sortByYear（）{
var myYears=[‘大一’、‘大二’、‘大三’、‘大四’]；
var myList=$（'foo ul'）；
var listItems=myList.children（'li'）.get（）；
排序（函数（a，b）{
var compA=$.inArray（$（a）.find（'.year'）.text（），myYears）；
var compB=$.inArray（$（b）.find（'.year'）.text（），myYears）；
返回（compAcompB）？1:0；
});
$（myList）.append（listItems）；
}

---

只需使用查找数组中每个学年的索引。请注意，对于数组中未找到的值，这将返回-1，这将使这些元素位于列表的顶部。

您必须更改排序条件回调。像这样：

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

函数sortByLastName（）{
var myList=$（'foo ul'）；
var listItems=myList.children（'li'）.get（）；
var分数={
“大一”：0，“大二”：1，“大三”：2，“大四”：3
};
排序（函数（a，b）{
var compA=$（a）.find（'.lname'）.text（）.toUpperCase（）；
var compB=$（b）.find（'.lname'）.text（）.toUpperCase（）；
compA=分数[compA]；compB=分数[compB]；//按分数而不是值排序
返回（compAcompB）？1:0；
});
$（myList）.append（listItems）；
};

---

希望这有助于提供您的代码