如何调整代码实现按姓氏首字母分组渲染用户名录，避免重复标题

AI 小北

2026-9-29

解决方案

问题原因

你现在的代码在遍历每个用户时，无论首字母是否发生变化，都会插入一次首字母标题和独立的ul列表，导致同一个首字母的标题重复出现。由于你的源数据已经提前按姓氏完成排序，仅需对比相邻用户的首字母，仅在首字母变化时新增分组标题即可。

修正后代码

// 先统一解析、排序数据，避免重复解析浪费性能
const userList = JSON.parse(data).sort(function (a, b) {
  return a.user_last.localeCompare(b.user_last);
});
// 清空容器，避免重复渲染
const $watchWindow = $("#watching-window").empty();
// 记录上一个分组的首字母
let lastLetter = '';
// 记录当前分组的ul容器
let $currentUl = null;

$.each(userList, function (i, item) {
  // 过滤socket_id为0的用户
  if (item.socket_id === '0') return;
  // 取姓氏首字母，统一转大写避免大小写分组错误
  const currentLetter = item.user_last.charAt(0).toUpperCase();
  // 首字母变化时新增分组
  if (currentLetter !== lastLetter) {
    // 插入首字母标题
    $watchWindow.append(`<div class="letter">${currentLetter}</div>`);
    // 新建当前分组的ul容器
    $currentUl = $('<ul></ul>').appendTo($watchWindow);
    // 更新上一个首字母标记
    lastLetter = currentLetter;
  }
  // 把当前用户插入到当前分组的ul中
  $currentUl.append(`<li>${item.user_title} ${item.user_first} ${item.user_last}</li>`);
});
// 统一做淡入效果
$watchWindow.fadeIn(400);