jQueryでカスタムソート順を使用してリストアイテムをソートする方法

Question

私の質問は、スタックオーバーフローで見つかった多くの他の多くのものとよく似ていますが、全く同じではありません。

私はリストアイテムを、各アイテム内に含まれるスパンの内容に基づいてソートしたいと思いますが、定義できるソート順を使用します。私は「年」スパンの内容に基づいてソートする

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

が、時系列ではなく、アルファベット順に：ここにHTMLは、サンプルのリスト項目のためです。

• 新入生
• 年生
• ジュニア
• シニア

どのように私はこれを行うことができます：順序は、明らかに、する必要がありますか？

ただ、参考のために、私は姓のアルファベット順にソートする（完璧に動作します）、次の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; 
}); 

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

希望これは