jQuery inArray() siempre devolviendo -1

Me gustaría ordenar una lista como esta:

<ul>
    <li>L</li>
    <li>S</li>
    <li>XXS</li>
    <li>XS</li>
    <li>XL</li>
    <li>L</li>
</ul>

con Javascript y jQuery para obtener el orden correcto de tallas de ropa, mi intento fue este:

var mylist = jQuery('#filter-size .mana-list');
var listitems = mylist.children('li').get();
listitems.sort(function (a, b) {

    var sizes = new Array();
    sizes = ["XXXS", "XXS", "XS", "S", "S-M", "S-L", "M", "M-L", "L", "L-XL", "XL", "XXL", "XXXL"];

    var compA = jQuery(a).text().toUpperCase();
    var compB = jQuery(b).text().toUpperCase();

    var asize = jQuery.inArray(compA, sizes);
    var bsize = jQuery.inArray(compB, sizes);

    return (asize > bsize) ? -1 : (asize < bsize) ? 1 : 0;
})

mi problema es que la función inArray() siempre devuelve -1 ¿qué estoy haciendo mal?

(nota: estoy usando jQuery en modo "Sin conflicto")

Gracias a todos de antemano

preguntado el 22 de mayo de 12 a las 16:05

¿Puedes publicar la salida de console.log(compA) y console.log(asize) -

inArray no siempre regresa -1 para mi.. que version de jQuery? jsfiddle.net/jNnTG -

no es -1... ver aquí: jsfiddle.net/qjxpX -

Funciona bien para mí: jsfiddle.net/Wxuw4 -- no está cambiando el orden en el DOM, tal vez ese sea su problema. -

Para su información, tiene el tamaño "L" allí dos veces, ¿uno de esos estaba destinado a ser "M"? -

2 Respuestas

Su código parece innecesariamente complicado.

Esto también producirá una lista ordenada de los elementos y evita el uso de costosas llamadas DOM (y jQuery) dentro de la función de comparación:

// get all of the text items, in order, in upper case
var listitems = jQuery('ul').children('li').map(function() {
    return jQuery(this).text().toUpperCase();
}).get();

// keep this outside the function to avoid instantiating it
// every time the comparator is called
var sizes = ["XXXS", "XXS", "XS", "S", "S-M", "S-L", "M",
                 "M-L", "L", "L-XL", "XL", "XXL", "XXXL"];

// just compare the "inArray" values to sort    
listitems.sort(function(a, b) {
    return jQuery.inArray(b, sizes) - jQuery.inArray(a, sizes);
})

Tenga en cuenta el uso de un operador menos simple en la función de comparación: este ordena de mayor a menor, y el comparador solo necesita producir "negativo, cero, positivo", no "-1, 0, 1".

NB: esto no cambia los elementos de la página; aclare si esa era su intención.

Vea http://jsfiddle.net/alnitak/v3hqB/

contestado el 22 de mayo de 12 a las 17:05

¡Gracias! Usé este código para cambiar los elementos de la lista en la página jQuery.each(listitems, function(idx, itm) { mylist.append(itm); }); - casco

Un seguimiento de la excelente respuesta de Alnitak.

Tu tipo estaba bien. Si desea actualizar su pantalla, algo como lo siguiente (escrito rápidamente) será suficiente:

var newList = $('<ul></ul>');
newList.append(listitems);
mylist.replaceWith(newList);

(Puede haber una mejor manera... tal vez newList podría construirse con listitems de una sola vez.)

contestado el 22 de mayo de 12 a las 17:05

¡Gracias! Usé: jQuery.each(listitems, function(idx, itm) { mylist.append(itm); }); - casco

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.