JavaScript 排序 DOM

Question

我正在尝试根据 data-* 对 DOM 进行排序属性。 DOM 看起来像这样，尽管重复并且具有递增的 id 和不同的图像源:

<div class="col mb-3" data-id="1" data-filter="Owned">
  <div class="card template">
    <img class="card-img w-100 d-block shadow" alt="Default Template" src="abc.jpg">
    <div class="card-img-overlay">
        <a class="btn btn-dark btn-sm template-preview float-end" role="button" target="_blank" href="organization.html/template.html?id=1">Preview</a>
    </div>
    <div class="card-body">
      <h5 class="card-title">Default Template</h5>
      <p class="card-text text-success">Owned</p>
    </div>
  </div>
</div>

我正在通过 <select /> 进行排序元素，其中 <option /> value 是保存字段和方向的 JSON 文字，例如:

{
  "field": "id",
  "direction": "asc"
}

在 <select />的更改事件，我有以下内容:

const templateSort_Change = (e) => {
    const templateSort = e.currentTarget;
    const templateSortValue = templateSort.value;
    const sort = JSON.parse(templateSortValue);
    const cols = document.querySelectorAll('div.col');
    const sortedCols = Array.from(cols).sort((a, b) => {
        if (sort.direction === 'desc') {
            return a.dataset[sort.field].toLowerCase() - b.dataset[sort.field].toLowerCase();
        } else {
            return b.dataset[sort.field].toLowerCase() - a.dataset[sort.field].toLowerCase();
        }
    });
    for (let col of cols) {
        col.parentNode.appendChild(col);
    }
}

问题在于，当执行 for/of 循环时，结果为 cols每次都是相同的顺序，查看文档我不确定为什么。我知道我正在进行字符串比较，但这些 id 仍然是个位数(例如 1、2、3 等)。

我的 sort 做错了什么导致数组每次都返回相同顺序的函数？

Answer 1

要对字符串进行排序，您需要localeCompare方法，减号(-)用于对数字而不是字符串进行排序。

  const sortedCols = Array.from(cols).sort((a, b) => {
    if (sort.direction === 'desc') {
        return b.dataset[sort.field].localeCompare(a.dataset[sort.field])
    } else {
        return a.dataset[sort.field].localeCompare(b.dataset[sort.field);
    }
});