根据数据值对 S、M、L 等服装尺码进行排序答案

【问题标题】：Sorting S, M, L etc clothing sizes from data value根据数据值对 S、M、L 等服装尺码进行排序
【发布时间】：2019-02-03 21:43:10
【问题描述】：

我正在尝试重新排序以下 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>

【问题讨论】：

标签： javascript jquery html ecmascript-6

【解决方案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>

【讨论】：

没问题。如果有帮助，请不要忘记接受答案 - 您之前的问题也是如此

【解决方案2】：

我也有类似的情况。如果您使用ES6，我会提出一个简短且经过优化的解决方案。这里可以在两组之间使用交集技术。我是这样使用的：

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

【讨论】：

【解决方案3】：

const sizes = ['s', 'm', 'xs', 'l', 'xxl', 'xl', 'xxxxs']

const sortSizes = sizes => sizes.map(s => s.toLowerCase()).map(size => ({
    size,
    points: size === 'm' ? 0 : size.length * (size.includes('s') ? -1 : 1),
  })).sort((a, b) => a.points - b.points)
  .map(({
    size
  }) => size)


console.log(sortSizes(sizes)) // => ['xxxxs', 'xs', 's', 'm', 'l', 'xl', 'xxl']

【讨论】：