求助：按下载量数值排序Div失效，求正确实现及原因解析

原代码失效原因 #

1. 下载量文本处理不规范 #

$(a).find(".downloads").text()获取的文本包含多余的空格、换行等空白字符，虽然JS在字符串相减时会尝试转换为数字，但这类空白容易导致转换异常或排序逻辑失效，必须先清理再转换数值。

2. 名称排序存在隐性问题 #

你提到按名称排序运行正常，但return $(a).find(".name").text() >= $(b).find(".name").text();返回的是布尔值（true/false），而Array.sort()要求排序函数返回负数、0或正数。部分浏览器兼容布尔值（将true视为1，false视为0），但这不符合标准规范，换环境可能出问题。

修正后的完整代码 #

JavaScript代码 #

// 按名称排序
function sortbyname() {
  const parent = $("#content");
  const divs = parent.children();
  const orderedDivsByName = divs.sort(function(a, b) {
    const nameA = $(a).find(".name").text().trim();
    const nameB = $(b).find(".name").text().trim();
    // 用localeCompare做标准字符串排序，返回-1/0/1
    return nameA.localeCompare(nameB);
  });
  parent.append(orderedDivsByName);
}

// 按下载量从高到低排序
function sortbymostdwnl() {
  const parent = $("#content");
  const divs = parent.children();
  const orderedDivsByDwnl = divs.sort(function(a, b) {
    // 清理空白后转为十进制整数，确保数值准确
    const downloadsA = parseInt($(a).find(".downloads").text().trim(), 10);
    const downloadsB = parseInt($(b).find(".downloads").text().trim(), 10);
    // 降序排序，升序则改为downloadsA - downloadsB
    return downloadsB - downloadsA;
  });
  parent.append(orderedDivsByDwnl);
}

HTML代码（补充排序按钮） #

<div id="content">
  <div class="wrapper">
    <div class="name">Test</div>
    <div class="downloads">
      45
      <em class="download_icon"></em>
    </div>
  </div>
  <div class="wrapper">
    <div class="name">Awesome Test</div>
    <div class="downloads">
      15
      <em class="download_icon"></em>
    </div>
  </div>
</div>

<!-- 排序触发按钮 -->
<button onclick="sortbyname()">按名称排序</button>
<button onclick="sortbymostdwnl()">按下载量从高到低排序</button>

关键修正说明 #

• 下载量排序：通过trim()清除文本空白，再用parseInt(...,10)显式转换为十进制整数，彻底避免数值转换异常。调整减法顺序可以切换升序/降序。
• 名称排序：改用localeCompare()方法，这是字符串排序的标准方案，返回值完全符合Array.sort()的要求，兼容性和准确性更强，还支持多语言字符排序。

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