Сортировать массив определенным образом

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

Приведенный выше код взят из Сортировка элементов опций в алфавитном порядке с использованием jQuery , написанного Малаком Джорджем.РЕДАКТИРОВАТЬ: Я изменил его, чтобы искать все экземпляры отдельно.

Теперь, это работает нормально, если найти экземпляры .wcpf-input-drop-down и отсортировать параметры внутри.

Однако, эта сортировка производит упорядочение таким образом: «1, 2, 26, 27, 28, 3, 31» и т. Д.

Мне нужно будет отсортировать его следующим образом: «1,2, 3, 26, 27, 28, 31 ".

Я искал часы и нашел много разговоров на эту тему, но я не могу добраться туда, куда я хочу.Я уверен, что видел способы достичь того, что мне нужно, но не смог.Я думаю, вот что я мог бы использовать, если бы я только знал, как вставить это в мой существующий код: Сортировать элементы массива (строка с числами), естественная сортировка

Может кто-нибудь помочьвыполнить сортировку, которую я хочу видеть в коде, который у меня сейчас есть?

Спасибо.

EDIT2: Вот ручка со всеми соответствующими данными для этого вопроса: https://codepen.io/jpontinen/pen/NJrXKQ

Answer 1

Проблема в том, что вы сортируете строки лексикографически («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 2

Подробности прокомментированы в демоверсии.

/* 
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>

Answer 3

Вычтите параметры в обратном вызове сортировки, чтобы они автоматически приводились к числовому типу данных:

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