Блог

Главная - Вопросы по программированию - Div клонируется несколько раз вместо требуемого количества

Div клонируется несколько раз вместо требуемого количества

#javascript #jquery #json #methods #clone

#javascript #jquery #json #методы #клонирование

Вопрос:

У меня есть некоторые данные JSON, которые содержат четыре раздела, и я хочу, чтобы мой html div был клонирован в зависимости от количества имеющихся разделов. Итак, если у меня есть 100 разделов в моем JSON, div должен быть клонирован 100 раз.

Мой div клонируется, и данные JSON добавляются к каждому из них, но проблема в том, что divs клонируются более одного раза. Первый раздел 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 -->

Комментарии:

1. Вы уверены, что показанный код не находится внутри другого цикла? У вас есть некоторые повторяющиеся проблемы с идентификаторами, но я не понимаю, почему то, что вы показали, создало бы такие дублирования

2. Создайте работоспособную демонстрацию, которая воспроизводит проблему

3. Эй @charlietfl основываясь на вашем комментарии, я подумал, была ли проблема где-то в HTML, и, конечно же, #titleBody была внутри col-6 div , что привело к дублированию. Но спасибо, что просмотрели мой код!

4. Все еще не понимаю, как это может привести к дублированию, но если это решит проблему … отлично!

5. Я тоже! 😛

Ответ №1:

Оказалось, что это #titleBody было внутри col-6 div , что каким-то образом привело к дублированию.