0

我有一个 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>

我知道如何按countOR排序，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列表。

有没有更简单的方法？

4

2 回答 2

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在 a 中else，因为 sort 函数永远不会评估 an else, if c1 === c2，因为它if包含一个return语句。

现在，sort函数期望X<0, X=0 or X>0返回（X输出在哪里），具体取决于是否a小于、等于或大于b。如果你减去b，a你会得到你需要的值。

于 2013-01-28T13:41:15.530 回答
1

为什么不把这两个功能组合成一个这样的：

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;
    }
});
于 2013-01-28T13:41:20.457 回答