Question

嗨，我想对链接列表进行排序以匹配数组顺序：

List: 

<a href="" data-value="10">10</a>
<a href="" data-value="6">6</a>
<a href="" data-value="8">8</a>
...
<a href="" data-value="m">M</a>
<a href="" data-value="s">S</a>

Array for Ordering:

['6', '8', '10', '12', '14', 'xs', 's', 'm', 'l', 'xl', 'xxl']

我正在使用以下方法对文本选项进行很好的排序，但对数字选项却没有进行排序：

(function () {
    var order = ['6', '8', '10', '12', '14', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
    var $wrapper = $('.size-filter');
    $wrapper.find('a').sort(function (a, b) {
      var aSize = $(a).data('value'), bSize = $(b).data('value');
      return order.indexOf(aSize) - order.indexOf(bSize);
    }).appendTo($wrapper);
  })();

如何调整此排序功能或重写它以便对文本和数字大小选项进行排序？

Answer 1

将链接存储在Map中，以其data-value属性为键，然后将map order数组存储到链接

const links = [...document.querySelectorAll('a[data-value]')].reduce((map, link) =>
    map.set(link.dataset.value, link), new Map())

const orderedLinks = order.filter(k => links.has(k)).map(k => links.get(k))

然后您可以使用jQuery将这些链接附加到另一个元素

$('some-element-selector').append(orderedLinks)

请注意，我已将order数组过滤为实际存在链接的数组。

使用数组对项目排序

1 个答案: