Question

我有一个HTML列表

<select>
  <option value="w" count="1">w (1)</option>
  <option value="a" count="1">a (1)</option>
  <option value="d" count="5">d (5)</option>
  <option value="r" count="0">r (0)</option>
  <option value="q" count="0">q (0)</option>
  <option value="s" count="0">s (0)</option>
  <option value="b" count="5">b (5)</option>
</select>

我希望列表首先按count排序，然后按value排序。

输出：

<select>  
  <option value="b" count="5">b (5)</option>
  <option value="d" count="5">d (5)</option>
  <option value="a" count="1">a (1)</option>
  <option value="w" count="1">w (1)</option>
  <option value="q" count="0">q (0)</option>
  <option value="r" count="0">r (0)</option>
  <option value="s" count="0">s (0)</option>
</select>

我知道如何按count或按value排序，但我找不到一种简单的方法来合并它们。

按计数排序：

select.sort(function (a, b) {
    var c1 = parseInt($(a).attr('count'), 10);
    var c2 = parseInt($(b).attr('count'), 10);
    return c1 < c2 ? 1 : c1 > c2 ? -1 : 0;
});

和按值

select.sort(function (a, b) {
    return $(a).text().toUpperCase().localeCompare($(b).text());
});

我正在考虑建立一个对象：

var map = {
    5: ['d', 'b'],
    1: ['a', 'w'],
    0: ['r', 'q', 's']
};

然后对每个键进行排序：

function keys(map) {
    var keys = [];
    for (var key in map) {
        if (map.hasOwnProperty(key)) map[key].sort();
    }
    return keys;
}

keys(map);
map;

最后重建select列表。

有更简单的方法吗？

Answer 1

试试这个：

select.sort(function (a, b) {
    var c1 = parseInt($(a).attr('count'), 10);
    var c2 = parseInt($(b).attr('count'), 10);

    if(c1 === c2){ // If the counts are equal, return the comparison for value.
        return $(a).text().toUpperCase().localeCompare($(b).text());
    }
    // Otherwise, compare the counts.
    // (With numbers, you can just substract `b` from `a` in sort functions.)
    return c1 - c2;
});

删除评论后，这只是6行代码。

没有必要将第二个return包裹在else中，因为排序函数不会评估else，如果c1 === c2，因为if 1}}包含return语句。

现在，sort函数需要返回X<0, X=0 or X>0（其中X是输出），具体取决于a是否小于，等于或大于比b。如果从b中减去a，则会获得所需的值。

Answer 2

为什么不将两个函数组合成一个这样的函数：

select.sort(function (a, b) {
    var c1 = parseInt($(a).attr('count'), 10);
    var c2 = parseInt($(b).attr('count'), 10);

    if ( c1 == c2 ) {
      return $(a).text().toUpperCase().localeCompare($(b).text());
    } else {
      return c1 < c2 ? 1 : -1;
    }
});

按计数和值对选择列表进行排序

2 个答案: