javascript - 根据数据值对 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

要实现此目的，您可以定义一个数组来存储您希望值排序的正确顺序。然后您可以创建自己的 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>