Handlebars渲染重复公司节点合并与去重问题求助

首先要指出你当前代码里的一个关键问题：HTML中的ID必须是唯一的，你现在的模板渲染出多个相同ID的div和label（比如重复的id="Final doo "和id="Final doo komp"），这违反了HTML规范，会导致后续JS操作出问题，也影响浏览器渲染。所以第一步建议先调整模板，用class和data属性替代重复的ID。

方案一：前端jQuery合并节点（适配现有渲染结构） #

如果你暂时不想修改后端逻辑，可以用jQuery实现节点合并。核心思路是：遍历所有职位节点，按公司名称分组，把同一公司的职位移到同一个容器里，删除重复的公司容器。

这里我修正了你的JS代码，同时处理了ID空格的问题：

window.onload = function() {
  // 用对象存储每个公司对应的容器
  const companyMap = new Map();

  $('#prem_inner > div').each(function() {
    const $currentDiv = $(this);
    // 提取公司名称并去除首尾空格（原HTML里ID带空格）
    const companyName = $currentDiv.attr('id').trim();
    // 获取当前容器里的职位标签（排除公司名称标签）
    const $jobLabel = $currentDiv.find('label:not([id$=komp])');

    if (!companyMap.has(companyName)) {
      // 首次遇到该公司，保存容器
      companyMap.set(companyName, $currentDiv);
    } else {
      // 已有该公司的容器，把职位标签移过去
      companyMap.get(companyName).append($jobLabel);
      // 删除重复的公司容器
      $currentDiv.remove();
    }
  });

  // 可选：给职位标签添加换行样式，让排版更清晰
  $('.job-label').css('display', 'block');
};

方案二：后端分组优化（更推荐） #

前端处理只是临时方案，更高效且规范的方式是在后端先把数据按公司分组，再传给Handlebars渲染，这样前端不需要额外处理，也避免了重复ID的问题。

1. 后端数据处理（Sequelize） #

在查询完gigs数据后，用reduce把相同公司的职位分组：

// 假设你从数据库查询到的gigs数组结构是：[{company_name: 'Final doo', job_title: 'Kontrolor2'}, ...]
const groupedGigs = gigs.reduce((acc, gig) => {
  const cleanCompanyName = gig.company_name.trim();
  if (!acc[cleanCompanyName]) {
    acc[cleanCompanyName] = {
      company: cleanCompanyName,
      jobs: []
    };
  }
  acc[cleanCompanyName].jobs.push(gig.job_title);
  return acc;
}, {});

// 转成数组传给模板
const templateData = { groupedGigs: Object.values(groupedGigs) };

2. 修改Handlebars模板 #

用分组后的数据渲染，避免重复ID：

<div id="prem_inner"> 
  {{#each groupedGigs}} 
    <div class="company-container"> 
      <label class="company-label" style="font-size: 30px;">
        <i class="far fa-building" style="letter-spacing: 0.246em; font-size: 30px; color: #7313E9;"></i>{{company}}
      </label> 
      {{#each jobs}}
        <label class="job-label" style="padding-left: 2em; display: block;">
          <i class="fas fa-briefcase" style="letter-spacing: 0.246em; font-size: 30px; color: #7313E9;"></i>{{this}}
        </label> 
      {{/each}}
    </div> 
  {{/each}} 
</div>

这样渲染出来的HTML天然就是合并好的结构，没有重复ID，也不需要前端再做DOM操作，性能和可维护性都更好。

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