按分类分组排序含小数的Div列表异常问题求助

问题核心 #

升序正常但降序时classification组顺序颠倒，本质是排序逻辑优先级错误：必须先保证classification的分组顺序（1在前、2在后），再处理同组内的distance降序，不能让distance排序覆盖分组逻辑。

关键修正点 #

• 优先比较classification：无论升序降序，强制让classification=1的项始终排在2前面
• 统一distance格式：将逗号分隔的小数（如2,2）替换为点，转换成JS可识别的浮点数字
• 同组内按distance降序排序

修正后的完整代码 #

HTML结构示例（需对应你实际的属性结构调整）

<div id="idx-list-ctn" class="list-ctn">
  <div class="partner-ctn" data-classification="1" data-distance="0,9">...</div>
  <div class="partner-ctn" data-classification="2" data-distance="1,7">...</div>
  <div class="partner-ctn" data-classification="1" data-distance="2,2">...</div>
  <div class="partner-ctn" data-classification="2" data-distance="2">...</div>
</div>

修正后的排序函数

$("#idx-list-ctn").find('.partner-ctn').sort(function(a, b) {
  // 1. 提取并转换classification为数字
  const classA = parseInt($(a).data('classification'), 10);
  const classB = parseInt($(b).data('classification'), 10);
  
  // 第一优先级：保证classification=1始终在2前面
  if (classA !== classB) {
    return classA - classB;
  }
  
  // 2. 处理distance格式，转换为浮点数字
  const distA = parseFloat($(a).data('distance').replace(',', '.'));
  const distB = parseFloat($(b).data('distance').replace(',', '.'));
  
  // 第二优先级：同组内按distance降序排序
  return distB - distA;
}).appendTo("#idx-list-ctn");

错误原因分析 #

你之前的代码大概率是先比较了distance，再处理classification的排序，导致distance较大的classification=2项直接排在了classification=1的前面。必须将classification的比较放在最前面，作为第一优先级逻辑。

验证结果 #

运行修正后的代码后，会完全匹配你的预期：

• 先展示classification=1的所有项，按distance从2,2到0,9降序排列
• 再展示classification=2的所有项，按distance从2到1,7降序排列

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