我正在尝试对以下 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>
最佳答案
要实现此目的,您可以定义一个数组来存储您希望值排序的正确顺序。然后您可以创建自己的 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>
关于javascript - 根据数据值对 S、M、L 等服装尺码进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52071722/