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

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>

我知道如何按计数或按值排序，但我找不到一种简单的方法来组合它们。

按数量排序:

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

按值(value)

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;

最后重建选择列表。

有没有更简单的方法？

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包含 return声明。

现在，sort函数期望 X<0, X=0 or X>0返回(其中 X 是输出)，具体取决于 if a小于、等于或大于b 。如果减去b来自a ，您将获得所需的值。