Cách sắp xếp các mục danh sách bằng cách sử dụng thứ tự sắp xếp tùy chỉnh trong jQuery

Question

Câu hỏi của tôi rất giống với một số mục khác mà tôi đã tìm thấy trên Stack Overflow, nhưng không hoàn toàn giống nhau.

Tôi muốn sắp xếp các mục danh sách dựa trên nội dung của một khoảng có trong mỗi mục - nhưng sử dụng thứ tự sắp xếp mà tôi có thể xác định. Đây là HTML cho một mục danh sách mẫu:

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

Tôi muốn sắp xếp dựa trên nội dung của khoảng "năm", nhưng theo thứ tự thời gian chứ không phải theo thứ tự bảng chữ cái. Trình tự, rõ ràng, cần phải:

• Freshman
• thứ hai
• Junior
• Senior

Làm thế nào tôi có thể làm điều này?

Chỉ cần để tham khảo, tôi đang sử dụng mã jQuery sau (mà hoạt động hoàn hảo) để sắp xếp theo thứ tự abc theo tên cuối cùng:

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

Để phù hợp với chức năng sortByLastName() của bạn, điều này sẽ làm việc:

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

Chỉ cần sử dụng $.inArray() để tìm các chỉ số của mỗi năm học trong mảng. Lưu ý rằng điều này sẽ trả về -1 cho các giá trị không được tìm thấy trong mảng, mà sẽ đặt những phần tử đó ở đầu danh sách của bạn.

Answer 2

Một cách đơn giản là tạo ra một mảng với giá trị mong đợi của bạn.

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

Sau đó, khi bạn sắp xếp các phần tử, hãy so sánh các chỉ mục.

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

Bạn phải thay đổi gọi lại tiêu chí sắp xếp của mình. Như thế này:

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

Hope this helps