使用jQuery时如何正确排序含数字的无序列表列表项？

我完全懂你遇到的这个坑——默认的字符串排序逻辑确实会搞出这种“10比2小”的乌龙，毕竟字符串比较是逐字符来的，1的ASCII码比2小，所以10 Meter就会排在2 Meter前面了。咱们只需要修改排序函数，把列表项里的数字提取出来转成数值再比较，就能实现正确的数值排序。

修复后的代码示例 #

$(".filtersDropDown").each(function(){
  // 取出当前下拉菜单里的所有li元素
  const listItems = $(this).find('li').get();
  
  // 自定义排序逻辑：优先按数值排序
  listItems.sort((a, b) => {
    // 从列表项文本中提取数字部分（适配开头带数字的情况）
    const numA = parseInt($(a).text().match(/\d+/)[0], 10);
    const numB = parseInt($(b).text().match(/\d+/)[0], 10);
    
    // 数值比较：返回负数则a排在b前，正数则b排在a前
    return numA - numB;
  });
  
  // 把排序后的元素重新插入到ul中
  $(this).find('ul').append(listItems);
});

关键细节说明 #

• 提取数字：用正则/\d+/匹配文本中的连续数字，确保我们拿到的是列表项里的数值部分（如果你的数字不在开头，可以调整正则，比如/(\d+) Meter/来精准匹配）。
• 转成数值：必须用parseInt（或parseFloat如果是小数）把提取到的字符串转成数值，不然还是会按字符串比较。记得加第二个参数10，避免出现八进制解析的问题。
• 排序逻辑：返回numA - numB是升序排序，如果需要降序，改成numB - numA就行。

处理边界情况（可选） #

如果你的列表里混了不带数字的项，可以加个判断，把这些项放到最后（或者最前），同时保留数字项的正确排序：

$(".filtersDropDown").each(function(){
  const listItems = $(this).find('li').get();
  
  listItems.sort((a, b) => {
    const textA = $(a).text();
    const textB = $(b).text();
    
    // 提取数字，没有数字的设为Infinity（会排在最后）
    const numA = textA.match(/\d+/) ? parseInt(textA.match(/\d+/)[0], 10) : Infinity;
    const numB = textB.match(/\d+/) ? parseInt(textB.match(/\d+/)[0], 10) : Infinity;
    
    // 先按数字排序，数字相同的话再按文本字母顺序排序
    if (numA !== numB) {
      return numA - numB;
    } else {
      return textA.localeCompare(textB);
    }
  });
  
  $(this).find('ul').append(listItems);
});

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