使用jQuery的.sort方法排序文本元素失效，请求排查代码问题

我看到你在使用jQuery对DOM元素按文本类型的data属性排序时遇到了问题——数字属性排序正常但文本排序完全失效，还不想用append方案来解决，咱们一步步来排查你的代码问题：

原代码的核心问题分析 #

先看你写的排序逻辑：

jQuery(document).ready(function($) { 
  var divList = $(".listing-item"); 
  var gg = divList.get().sort(function(a, b) { 
    return $(a).data("listing-title") < $(b).data("listing-title"); 
  }); 
  console.log(gg); 
  $("#list").html(divList); 
});

这里有两个关键错误导致排序失效：

1. sort回调的返回值不符合要求：JavaScript的Array.sort()方法要求回调函数返回数字值（-1、0、1）来表示元素的相对位置，但你返回的是布尔值（true/false）。布尔值在排序时会被强制转换为1（true）或0（false），这会彻底打乱文本排序的逻辑，自然无法得到正确的字母顺序。
2. 没有使用排序后的数组更新DOM：你最后把原始的divList（未排序的jQuery对象）重新塞回了#list，而不是你已经排序好的gg数组——这就导致控制台能看到正确结果，但页面上的元素完全没变化。

修复后的代码 #

把这两个问题修正后，代码就能正常工作了：

jQuery(document).ready(function($) { 
  var divList = $(".listing-item"); 
  // 修正sort回调，返回符合要求的数字值
  var sortedItems = divList.get().sort(function(a, b) { 
    const titleA = $(a).data("listing-title");
    const titleB = $(b).data("listing-title");
    // 按字母升序排列，需要降序就把返回值反过来
    if (titleA < titleB) {
      return -1;
    }
    if (titleA > titleB) {
      return 1;
    }
    return 0;
  }); 
  // 使用排序后的数组更新DOM，转为jQuery对象后插入
  $("#list").html($(sortedItems)); 
});

简化写法小技巧 #

如果你想简化文本排序的代码，可以用字符串的localeCompare()方法，它会直接返回符合sort要求的数字值，还能自动处理多语言字符：

var sortedItems = divList.get().sort(function(a, b) { 
  return $(a).data("listing-title").localeCompare($(b).data("listing-title"));
});

补充说明 #

为什么之前数字属性排序正常？因为数字比较时返回的是差值（比如5-3=2、3-5=-2），刚好符合sort对返回值的要求，所以碰巧能正常工作，但文本比较不能套用这个逻辑。

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