使用jQuery对多个列表单独按字母排序的问题求助

嘿，你找对方向啦！问题确实出在.each()循环里的元素选择上——你现在的代码会把页面上所有.alphabet下的<li>都捞过来排序，而不是只处理当前正在遍历的那个<ul>里的项。

问题根源 #

当你在.each()的回调里写$('.alphabet li')时，jQuery会选中所有匹配这个选择器的元素，也就是两个列表里的所有<li>。所以每次循环都会把所有<li>排序后塞进当前的<ul>，导致两个列表最后都变成了所有项的集合，自然达不到各自排序的效果。

修正方案 #

只需要把选择<li>的范围限定在当前的<ul>内部就行。在.each()的回调函数里，this指代的就是当前正在处理的<ul>元素，用$(this).find('li')就能精准获取这个列表自己的子项：

$(".alphabet ul").each(function(){
  // 仅选中当前ul下的li元素
  $(this).find('li').sort(function(a, b) {
    // 先去除文本前后空格，避免空格干扰排序
    var aText = $(a).text().trim(),
        bText = $(b).text().trim();
    // 使用localeCompare更简洁，还支持多语言排序
    return aText.localeCompare(bText);
  }).appendTo(this);
});

额外优化点 #

• 用localeCompare()替代手动写三元判断，代码更简洁，而且对非英语字符的排序支持更好。
• 加上.trim()可以避免列表项文本前后的空格（比如不小心输入的空格）影响排序结果。

这样修改后，水果列表会按Apple → Banana → Orange排序，蔬菜列表会按Carrot → Cucumber → Lettuce排序，完全是各自独立的字母顺序啦！

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