Jak sortować elementy listy za pomocą niestandardowego porządku sortowania w jQuery

Question

Moje pytanie jest bardzo podobne do wielu innych, które znalazłem w Stack Overflow, ale nie do końca tak samo.

Chciałbym posortować elementy listy na podstawie zawartości rozpiętości zawartej w każdym z elementów - ale używając kolejności sortowania, którą mogę zdefiniować. Oto kod HTML do elementu listy próbki:

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

chcę sortować na podstawie zawartości „rok” rozpiętości, ale zamiast chronologicznie alfabetycznie. Kolejność, oczywiście, musi być:

• Freshman
• Sophomore
• Junior
• Starszy

Jak mogę to zrobić?

Tylko dla odniesienia, używam następujący kod jQuery (która działa perfekcyjnie), aby sortować alfabetycznie według nazwiska:

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

Aby dopasować funkcję swoją sortByLastName(), to będzie działać:

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

Wystarczy użyć $.inArray() znaleźć indeksy każdego roku szkolnego w tablicy. Zwróć uwagę, że to zwróci -1 dla wartości nie znalezionych w tablicy, co spowoduje umieszczenie tych elementów na górze listy.

Answer 2

Jeden prosty sposób byłoby utworzyć tablicę ze swoimi wartościami oczekiwanymi.

var years=['Freshman', 'Sophomore', 'Junior', 'Senior' ]; 

Następnie, sortując elementy, porównaj indeksy.

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

Musisz zmienić swoje wywołanie zwrotne kryterium sortowania. Tak:

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

nadzieję, że to pomaga