Cómo ordenar elementos de la lista usando un orden personalizado en jQuery

Question

Mi pregunta es muy similar a la cantidad de otras que he encontrado en Desbordamiento de pila, pero no exactamente igual.

Me gustaría ordenar elementos de la lista en función del contenido de un lapso contenido en cada elemento, pero utilizando un orden de clasificación que puedo definir. Aquí está el código HTML para un elemento de la lista de ejemplo:

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

que desea ordenar en base al contenido de la extensión "año", pero en lugar de cronológicamente por orden alfabético. El orden, obviamente, tiene que ser:

• Freshman
• Sophomore
• junior
• Superior

¿Cómo puedo hacer esto?

Sólo como referencia, estoy usando el siguiente código de jQuery (que funciona perfectamente) para ordenar alfabéticamente por el apellido:

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

para que coincida con su función sortByLastName(), esto funcionarí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); 
} 

sólo tiene que utilizar $.inArray() para encontrar los índices de cada año escolar dentro de la matriz. Tenga en cuenta que esto devolverá -1 para los valores que no se encuentran en la matriz, lo que colocará esos elementos en la parte superior de su lista.

Answer 2

Una forma sencilla sería la creación de una matriz con sus valores esperados.

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

Luego, cuando ordene sus elementos, compare los índices.

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

Tienes que cambiar la devolución de llamada del criterio de ordenación. De esta manera:

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

Esperanza esto ayuda