Div 被克隆了多次而不是所需的数量

Div gets cloned multiple times instead of the required amount

我有一些 JSON data that contains four sections,我希望根据有多少节来克隆我的 html div。因此,如果我的 JSON 中有 100 个部分,div 应该被克隆 100 次。

我的 div 正在被克隆并且 JSON 数据被附加到每个数据,但是 问题是 div 被克隆得更多不止一次。 第一个 JSON 部分被克隆了 4 倍,第二个部分被克隆了 3 倍,第三个部分被克隆了 2 倍,等等。这里有一个模式,但我不确定为什么会这样。

JSON

JS 片段:

import $ from 'jquery';
import jsonData from "./test.json";

let onlyTitles = jsonData.d.results.filter(result => result.Title !== "");

onlyTitles.forEach(title => {
  let $clonedDiv = $("#template").clone();
  $clonedDiv.removeAttr("id");

  $clonedDiv.find("#filledRowBody").append(`<td>${title.Title}</td><td>${title.Role}</td><td>${title.Office}</td><td>${title.IsActive}</td>`);
  $clonedDiv.find("#filledRowBody").removeAttr("id");
  $("#titleBody").append($clonedDiv);
})

HTML 片段:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="template" class="col-6">

  <h3 id="display-form-job-title"></h3>

  <div class="button-group">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Edit Form</button>

    <!-- Button trigger PDF -->
    <button type="button" class="btn btn-secondary" id="pdf-trigger" data-toggle="" data-target="#pdfprint">Save as PDF</button>
  </div>
  <hr>
  <h4>Hiring Goals:</h4>

  <div class="col-12">
    <table class="table order-list" id="hiring-goals-table">

      <thead>
        <tr>
          <td>Number of Hires</td>
        </tr>
      </thead>

      <tbody class="tbody-hire">
        <tr>
          <td></td>
        </tr>
      </tbody>

    </table>

  </div>

  <hr>

  <h4>Open Searches:</h4>

  <div class="col-12">
    <table class="table order-list" id="role-table">

      <thead>
        <tr>
          <td>Role</td>
          <td>Location</td>
          <td>Active</td>
        </tr>
      </thead>

      <tbody class="tbody-search">
        <tr>
          <td></td>
        </tr>
      </tbody>
    </table>

  </div>
  <h4>Roles Filled:</h4>
  <div class="col-12">
    <table class="table order-list" id="role-table">

      <thead>
        <tr>
          <td class="thead-emp">Name</td>
          <td class="thead-role-fill">Role</td>
          <td class="thead-loc-fill">Location</td>
          <td class="thead-act-fill">Active</td>
        </tr>
      </thead>

      <tbody>
        <tr id="filledRowBody">

        </tr>
      </tbody>
    </table>
  </div>
</div>

<div id="titleBody">

</div> <!-- col-6 -->

原来 #titleBodycol-6 div 内部,这不知何故导致了重复。