辅导申请列表内除首次外的重复学生姓名高亮实现方法咨询

前置准备 #

先定义高亮样式，可根据页面风格调整：

.duplicate-student {
  /* 浅黄背景+深棕文字，和需求截图效果一致 */
  background-color: #fff3cd;
  color: #856404;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 3px;
}

实现方案（分两种场景） #

场景1：前端动态渲染名单 #

如果名单是前端拉取接口后渲染，或者静态页面已经渲染好名单，直接用JS处理即可：

// 注：请把选择器替换为你页面实际的DOM选择器
// 1. 定义集合存储已出现的学生唯一标识，优先用学号，避免同名误判
const appearedStudents = new Set()
// 2. 按申请时间正序遍历所有申请记录
document.querySelectorAll('.student-apply-item').forEach(item => {
  // 优先取学生学号（可以存在dataset属性里），没有学号再用姓名
  const studentUniqueId = item.dataset.studentId || item.querySelector('.student-name').textContent.trim()
  if (appearedStudents.has(studentUniqueId)) {
    // 重复申请，给姓名加高亮
    const nameEl = item.querySelector('.student-name')
    nameEl.classList.add('duplicate-student')
    // 可选：加hover提示
    nameEl.title = '该学生已存在有效辅导申请，本次申请需忽略'
  } else {
    // 首次出现的有效申请，加入集合
    appearedStudents.add(studentUniqueId)
  }
})

场景2：后端服务端渲染页面 #

如果页面是PHP/Java/Node等后端直出HTML，直接在渲染阶段标记重复项即可，逻辑和前端一致：

1. 初始化空集合存储已出现的学生唯一标识
2. 按申请提交时间正序遍历申请列表
3. 若当前学生标识已在集合中，渲染姓名时加上duplicate-student类；若不存在则把标识加入集合后正常渲染

注意事项 #

• 判重必须用学生唯一标识（学号、身份证号等），仅用姓名会出现同名不同人被误标记的问题
• 遍历名单的顺序必须是申请提交时间正序，确保最早提交的有效申请不会被标记，后续提交的重复申请才会被高亮

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