JavaScript按元素alt属性实现字母排序不生效问题求助

• 排序逻辑错误：$(a).attr('alt') - $(b).attr('alt') 写法仅适用于数字类型值的比较。字符串做减法运算会被JS隐式转换为数字，你的属性值是字母，转换结果为NaN，排序函数判定所有元素权重相等，不会触发重排。字符串按字母序排序需要使用localeCompare()方法。
• 未更新DOM：仅对jQuery对象集合排序仅修改内存中的元素顺序，没有同步到页面DOM结构，视觉上看不到排序效果，需要将排序后的元素重新插入父容器触发DOM更新。
• 可选规范问题：alt是<img>标签的专属属性，给普通<div>使用不符合HTML规范，建议替换为自定义data-*属性，比如data-sort-alt。

修正后代码 #

可选规范优化版HTML（不改原有属性可跳过这部分） #

<div class="box" data-sort-alt="B"></div>
<div class="box" data-sort-alt="A"></div>
<div class="box" data-sort-alt="C"></div>
<div class="box" data-sort-alt="E"></div>
<div class="box" data-sort-alt="F"></div>
<div class="box" data-sort-alt="D"></div>

JS代码（兼容两个版本） #

不修改原有HTML属性版本

// 替换为你的.box元素的实际父容器选择器
const boxParent = $('.box').parent();
const boxes = $('.box');

const orderedBoxes = boxes.sort(function(a, b){
  return $(a).attr('alt').localeCompare($(b).attr('alt'))
});

// 将排序后的元素重新插入父容器，更新DOM
boxParent.append(orderedBoxes);

console.log(orderedBoxes);

使用规范自定义属性版本

// 替换为你的.box元素的实际父容器选择器
const boxParent = $('.box').parent();
const boxes = $('.box');

const orderedBoxes = boxes.sort(function(a, b){
  return $(a).data('sort-alt').localeCompare($(b).data('sort-alt'))
});

// 将排序后的元素重新插入父容器，更新DOM
boxParent.append(orderedBoxes);

console.log(orderedBoxes);

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