基于data-*属性排序DOM元素时排序结果始终不变的问题排查

问题场景与代码 #

你尝试通过data-*属性对重复的DOM卡片元素排序，DOM结构如下：

<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>的值是包含排序字段和方向的JSON：

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

你编写的change事件处理代码如下：

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);
    }
}

问题：执行循环后，DOM元素的顺序始终没有变化。

问题原因 #

1. 排序逻辑方向完全颠倒：当direction为asc（升序）时，你返回的是b - a，实际是降序逻辑；而desc时返回a - b，实际是升序逻辑，规则完全搞反。
2. 循环对象错误：你最后循环的是cols（原DOM集合），而非排序后的sortedCols数组，所以DOM元素顺序不会改变。
3. 字符串转数字不严谨：虽然单个数字字符串相减会自动转数字，但如果后续data-id变成多位数（比如"10"和"2"），直接用字符串相减会出现逻辑错误。

修复后的代码 #

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) => {
        // 显式将data属性值转为数字，避免字符串比较问题
        const valA = Number(a.dataset[sort.field]);
        const valB = Number(b.dataset[sort.field]);
        
        if (sort.direction === 'desc') {
            // 降序：b值减a值
            return valB - valA;
        } else {
            // 升序：a值减b值
            return valA - valB;
        }
    });
    // 循环排序后的数组，重新追加到父节点
    for (let col of sortedCols) {
        col.parentNode.appendChild(col);
    }
}

关键修改点 #

• 修正排序逻辑的方向，确保asc和desc对应正确的比较规则
• 将dataset的值显式转为数字，保证多位数场景下排序正确
• 循环时使用排序后的sortedCols数组，而非原DOM集合

内容的提问来源于stack exchange，提问作者David