1

我想对这样的列表进行排序：

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

使用 Javascript 和 jQuery 来获得正确的服装尺寸顺序，我的尝试是这样的：

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

我的问题是 inArray() 函数总是返回 -1 我做错了什么？

（注意：我在“无冲突”模式下使用 jQuery）

谢谢大家

4

2 回答 2

3

您的代码显得不必要地复杂。

这也将产生一个排序的项目列表，并避免在比较器函数中使用昂贵的 DOM（和 jQuery）调用：

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

请注意在比较器函数中使用了一个简单的减号运算符 - 这个运算符从最大到最小排序，并且比较器只需要产生“负、零、正”，而不是“-1、0、1”。

注意：这不会改变页面中的元素 - 请澄清这是否是您的意图。

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

于 2012-05-22T16:05:18.247 回答
0

对 Alnitak 出色答案的跟进。

你的分类很好。如果您确实想更新您的显示，类似以下的内容（快速编写）可以解决问题：

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

（可能有更好的方法......也许newList可以listitems一次性构建。）

于 2012-05-22T16:22:24.340 回答