Appending API Json data creates siblings instead of children within children-CodePudding

Html Structure

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


</div>

Jquery Code

function (data) {
    var data = data.departments;
    $.each(data, function (i, item) {
      if (item.jobs.length > 0) {
        var teamWrap = $('.teams-wrap').append(
          '<div ></div>'
        );
        var newDept = (teamWrap).append(
          '<h3 >'  
            item.name  
            "</h3></div>"
        );
        $.each(item.jobs, function (i, jobs) {
          $(teamWrap).append(
            '<p>'   jobs.title   '</p>'
          );
        });
      }
    });
  }

Basically I want for each Team(single-team-wrap) to create a div with that class and in it have the H3 "team-title" and as siblings to the H3 each single team position. Right now the current result I get is that under teams-wrap I get single-team-wrap as a child, and the rest as children too, basically they all become siblings. single-team-wrap is a sibling to team-title and to every single-team-position.

I want each div appended to be inbetween the of the var. Looking at it there should be a way to insert it directly there but I'm totally clueless on what to do. I tried appendTo, after, insertAfter but nothing gets the result I'm looking for.

CodePudding user response：

You have a syntax error however might I suggest you hit the DOM less, once per team and create interim objects instead. I renamed a few things to make it more clear perhaps.

function doStuff(data) {
  var dep = data.departments;
  var teams = $('.teams-wrap');
  $.each(dep, function(i, item) {
    if (item.jobs.length > 0) {
      let teamWrap = $('<div ></div>');
      $('<h3 >'   item.name   "</h3>").appendTo(teamWrap);
      $.each(item.jobs, function(j, job) {
        $('<p>'   job.title   '</p>').appendTo(teamWrap);
      });
      teams.append(teamWrap);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div class='single-team-wrap'>
    <h3 class='team-title'>
      Team Title
    </h3>
    <div >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </div>
    <div >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </div>
    <div >
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </div>
  </div>


</div>