如何用JQuery去除HTML重复skill-category并重构列表展示？

你需要把重复的分类标题合并，将同分类下的技能整理成列表展示，直接修改文本的思路没法实现结构重构，得先收集分类数据再重新生成HTML结构，具体代码如下：

// 1. 收集所有分类与对应技能
const skillCategories = {};

$('.skill-item').each(function() {
  const category = $(this).find('.skill-category').text().trim();
  const skill = $(this).find('div:not(.skill-category)').text().trim();
  
  // 初始化分类数组，追加技能项
  if (!skillCategories[category]) {
    skillCategories[category] = [];
  }
  skillCategories[category].push(skill);
});

// 2. 清空原容器，重新构建目标HTML结构
const $skillContainer = $('.skill-items').empty();

// 遍历分类数据，生成对应DOM元素
$.each(skillCategories, function(category, skills) {
  // 创建分类标题
  const $categoryTitle = $('<p>').text(category);
  // 创建技能列表容器
  const $skillList = $('<ul>');
  
  // 生成每个技能的列表项
  skills.forEach(skill => {
    $skillList.append($('<li>').text(skill));
  });
  
  // 将标题和列表插入容器
  $skillContainer.append($categoryTitle).append($skillList);
});

代码说明： #

• 第一步遍历所有技能项，把分类和对应技能整理成键值对结构，确保每个分类只存一次，同分类技能统一存入对应数组
• 第二步清空原始容器，根据整理好的分类数据，逐个生成标题和列表结构，再插入到容器中

你之前的代码仅尝试替换相邻元素的文本，既无法处理非相邻的同分类项，也没有改变原有DOM结构，所以达不到预期效果。

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