jQuery追加API JSON数据时生成兄弟节点而非预期子节点的DOM结构问题

问题分析与解决方案 #

你遇到的核心问题是没有正确维护DOM元素的层级引用——每次append操作都直接作用在.teams-wrap上，导致所有元素都变成了它的直接子节点，完全打乱了预期的嵌套结构。

期望的DOM结构 #

<div class="teams-wrap"> 
 <div class='single-team-wrap'> 
  <h3 class='team-title'> Team Title </h3> 
  <div class="single-team-position"> 
   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
  </div> 
  <div class="single-team-position"> 
   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
  </div> 
  <div class="single-team-position"> 
   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
  </div> 
 </div> 
</div>

原代码的核心错误 #

原代码里，你没有为每个团队容器single-team-wrap保存独立的引用，后续的标题和职位节点都直接追加到了父容器.teams-wrap上，自然无法形成嵌套层级。

修正后的jQuery代码 #

function (data) { 
  var departments = data.departments; 
  $.each(departments, function (i, item) { 
    if (item.jobs.length > 0) { 
      // 1. 创建单个团队容器并追加到父容器，同时保存这个容器的引用
      var $singleTeam = $('<div class="single-team-wrap"></div>').appendTo('.teams-wrap');
      // 2. 往单个团队容器内添加标题
      $singleTeam.append('<h3 class="team-title">' + item.name + '</h3>');
      // 3. 遍历职位，每个职位包裹在single-team-position容器内，追加到单个团队容器
      $.each(item.jobs, function (j, job) { 
        $singleTeam.append('<div class="single-team-position"><p>' + job.title + '</p></div>'); 
      }); 
    } 
  }); 
}

关键修正说明： #

• 用$('<div class="single-team-wrap"></div>').appendTo('.teams-wrap')直接创建并挂载团队容器，同时把这个新元素的引用存在$singleTeam变量里，后续所有子元素都往这个变量对应的容器里追加，确保层级正确。
• 每个职位都包裹在single-team-position容器中，完全匹配你期望的DOM结构。
• 优化了变量命名（比如把重复的data改为departments，jobs改为job），避免变量覆盖和语义歧义。

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