Как отсортировать элементы списка, используя пользовательский порядок сортировки в jQuery

Question

Мой вопрос очень похож на ряд других, которые я нашел в Переполнении стека, но не совсем так.

Я бы хотел отсортировать элементы списка на основе содержимого диапазона, содержащегося в каждом элементе, но с использованием порядка сортировки, который я могу определить. Вот HTML-код для примера элемента списка:

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

Я хочу отсортировать по содержанию интервала «год», но не в алфавитном, а в хронологическом порядке. Порядок, очевидно, должен быть:

• Первокурсник
• Sophomore
• Младший
• Старший

Как я могу это сделать?

Просто для справки, я использую следующий код 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);
};

Надеюсь, это поможет