Сортировка S, M, L и т. Д. Размеров одежды по значению данных

Question

Я пытаюсь упорядочить следующие элементы div, чтобы они располагались в правильном порядке (s, m, l, xl) на основе их значения данных.

<div class="size-swatches">
    <div class="swatch size" data-value="m"></div>
    <div class="swatch size" data-value="s"></div>
    <div class="swatch size" data-value="xl"></div>
    <div class="swatch size" data-value="l"></div>
</div>

Для числовых данных (8, 10, 12 и т. Д.) Я использовал следующий скрипт, но я не уверен, как бы я подошел к этому для s, m, l, xl

var $wrapper = $('.size-swatches');
$wrapper.find('.swatch').sort(function(a, b) {
    return +a.dataset.value - +b.dataset.value;
})
.appendTo($wrapper);

Цель состоит в том, чтобы упорядочить элементы div следующим образом:

<div class="size-swatches">
    <div class="swatch size" data-value="s"></div>
    <div class="swatch size" data-value="m"></div>
    <div class="swatch size" data-value="l"></div>
    <div class="swatch size" data-value="xl"></div>
</div>

Answer 1

У меня была такая же ситуация. Я придумаю решение, которое будет коротким и оптимизированным, если вы используете ES6. Техника пересечения может быть использована здесь между двумя наборами. Я использовал это следующим образом:

const filteredValues = ['xs', 's', 'm', 'l', 'xl', 'xxl']
    .filter(x => new Set(['xs', 'xs', 'm', 'l', 'xxl']).has(x))
console.log(filteredValues)

Answer 2

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

var order = ['s', 'm', 'l', 'xl'];

var $wrapper = $('.size-swatches');
$wrapper.find('.swatch').sort(function(a, b) {
  var aSize = $(a).data('value'), bSize = $(b).data('value');
  return order.indexOf(aSize) - order.indexOf(bSize);
}).appendTo($wrapper);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="size-swatches">
  <div class="swatch size" data-value="m">M</div>
  <div class="swatch size" data-value="s">S</div>
  <div class="swatch size" data-value="xl">XL</div>
  <div class="swatch size" data-value="l">L</div>
</div>