如何使用jQuery对列表进行分组？附排序代码与预期效果

要实现你想要的按字母区间分组的列表效果，我们可以在现有排序逻辑的基础上，添加分组判断和标题插入的逻辑。下面是具体的实现方案：

完整代码示例 #

$(function(){ 
  var data =['c','d','c','abc','dee','pu','gu'];
  // 定义分组规则：每个分组的显示标签和首字母匹配条件
  const groups = [
    { label: 'A---D', matches: (firstChar) => firstChar >= 'A' && firstChar <= 'D' },
    { label: 'E---I', matches: (firstChar) => firstChar >= 'E' && firstChar <= 'I' },
    { label: 'J---P', matches: (firstChar) => firstChar >= 'J' && firstChar <= 'P' },
    { label: 'Q---Z', matches: (firstChar) => firstChar >= 'Q' && firstChar <= 'Z' }
  ];

  function showItemsInList(data, element){ 
    let str = '';
    const sortedData = data.sort();
    let currentGroup = null; // 跟踪当前正在处理的分组

    sortedData.forEach(item => {
      // 获取元素首字母并转为大写，统一判断逻辑
      const firstChar = item.charAt(0).toUpperCase();
      // 找到当前元素所属的分组
      const matchedGroup = groups.find(group => group.matches(firstChar));

      // 如果当前元素属于新的分组，先插入分组标题
      if (matchedGroup && matchedGroup !== currentGroup) {
        str += `<li>${matchedGroup.label}</li>`;
        currentGroup = matchedGroup; // 更新当前分组标记
      }

      // 插入当前元素的列表项
      str += `<li>${item}</li>`;
    });

    element.append(str); 
  } 

  showItemsInList(data,$('.abc ul'));
});

代码逻辑说明 #

1. 分组规则定义：我们先定义了groups数组，每个对象包含分组的显示标签（比如A---D）和一个匹配函数，用来判断元素的首字母是否属于该区间。
2. 遍历排序后的数组：在遍历已排序的数组时，我们先提取每个元素的首字母并转为大写（避免大小写差异影响分组判断）。
3. 分组切换判断：每次遍历元素时，检查它所属的分组是否和当前正在处理的分组一致。如果不一致，就先插入分组标题的<li>元素，再插入当前元素的列表项。
4. 保持顺序：因为数组已经提前排序，所以同一分组的元素会连续出现，只需要在第一次遇到新分组时插入标题即可。

扩展提示 #

如果你的数据中可能包含数字、特殊字符或者不在A-Z范围内的内容，可以在groups数组末尾添加一个默认分组，确保所有元素都能被归类：

{ label: '其他', matches: () => true }

这样就能完美实现你预期的分组列表效果啦！

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