Question

我有一个由选择下拉列表中的选项填充的数组。

jQuery('.wcpf-input-drop-down').each(function () {
var sel = jQuery(this);
var selected = sel.val(); // cache selected value, before reordering
var opts_list = sel.find('option');
opts_list.sort(function(a, b) { return jQuery(a).text() > jQuery(b).text() ? 1 : -1; });
sel.html('').append(opts_list);
sel.val(selected); // set cached selected value
    });

以上代码来自Sorting options elements alphabetically using jQuery，由Malak George编写。编辑：我已经对其进行了修改，以分别查找所有实例。

现在，就找到.wcpf-input-drop-down的实例并对其中的选项进行排序而言，此方法工作正常。

但是，这种排序以这种方式产生排序：“ 1、2、26、27、28、3、31”，依此类推。

我需要将其排序如下：“ 1、2、3、26、27、28、31”。

我一直在搜索几个小时，发现了很多关于该主题的话题，但是我找不到想要的地方。我确定我已经找到了实现我所需要的方法的方法，但是还没有做到。我想，如果我只知道如何将其插入到现有代码中，我可以使用以下代码：Sort Array Elements (string with numbers), natural sort

有人可以帮助我实现我希望在现在的代码中看到的排序吗？

谢谢。

EDIT2：这是一支笔，其中包含与此问题相关的所有数据：https://codepen.io/jpontinen/pen/NJrXKQ

Answer 1

减去排序回调中的选项，这样它们将自动强制为数字数据类型：

opts_list.sort(function(a, b) { 
     return jQuery(a).text() - jQuery(b).text()
});

如果您还具有包含非数字数据的下拉列表，需要按字母顺序排序，那么您需要一种自然排序方法：

opts_list.sort(function(a, b) { 
  return jQuery(a).text().localeCompare(jQuery(b).text(), undefined, {numeric: true, sensitivity: 'base'});
});

Answer 2

问题是您要按字典顺序对字符串进行排序（“ 26”排在“ 3”之前）。

您要按数值排序（将字符串转换为数字）：

// Implicitly cast to Number type using subtraction operator.
opts_list.sort(function(a, b) {
    return jQuery(a).text() - jQuery(b).text();
});

还有其他一些变化：

// Fewest changes to original version in question.
// Explicit conversion using parseInt().
opts_list.sort(function(a, b) {
    // Should return 0 when a and b are equal, but this version returns -1.
    return parseInt(jQuery(a).text()) > parseInt(jQuery(b).text()) ? 1 : -1;
});

// Explicitly convert to integer type using parseInt.
// Note `jQuery(a).text()` can be simplified to `a.text`
opts_list.sort(function(a, b) {
    return parseInt(a.text, 10) - parseInt(b.text, 10);
});

Answer 3

详细信息在演示中进行了评论。

/* 
On each select.sel...
...get all of its options...
...then make an array of those option.
Next, sort the array of options by their .value...
...and remove everything in select.sel...
...and append the sorted array in select.sel
*/
$('.sel').each(function(i) {
  var opt = $(this).find('option');
  var arr = $.makeArray(opt);
  var sorted = arr.sort(function(a, b) {
    return parseInt(a.value, 10) - parseInt(b.value, 10);
  });
  $(this).empty().append(sorted);
});

<select class="sel">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="10">10</option>
  <option value="107">107</option>
  <option value="108">108</option>
  <option value="11">11</option>
  <option value="75">75</option>
  <option value="8">8</option>
  <option value="83">83</option>
  <option value="9">9</option>
  <option value="110">110</option>
  <option value="111">111</option>
  <option value="114">114</option>
  <option value="12">12</option>
  <option value="71">71</option>
  <option selected>Values to be sorted</option>
</select>

<hr>

<select class="sel">
  <option value="11">11</option>
  <option value="89">89</option>
  <option value="5">5</option>
  <option value="0">0</option>
  <option value="46">46</option>
  <option value="33">33</option>
  <option value="1">1</option>
  <option value="6">6</option>
  <option value="21">21</option>
  <option value="40">40</option>
  <option value="24">24</option>
  <option value="175">175</option>
  <option value="81">81</option>
  <option value="123">123</option>
  <option value="94">94</option>
  <option selected>Values to be sorted</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

以某种方式对数组排序

3 个答案: