Цикл по элементам DOM и дочерним элементам для создания массива JS - проблемы с пониманием лучшего способа достижения этой цели

Question

Я ценю любое время, которое вы тратите на этот мой вопрос.

Проект

Моя мама - учитель рисования, которая тратит много времени на создание бумаги. режущие направляющие для ее проектов. Я работаю над инструментом для нее, который позволит ей быстро создавать и распространять руководства на своем веб-сайте. Ее сайт создан с использованием WordPress, поэтому я создал инструмент с использованием jQuery и jQuery UI. Вот как это выглядит в действии:

https://i.stack.imgur.com/z3Y5C.gif

Пользовательский интерфейс работает достаточно хорошо, чтобы перейти к сохранению данных, и именно здесь у меня возникают проблемы.

Проблема

Я хочу создать массив на основе элементов DOM, созданных jquery. Планируется сохранить массив в WordPress, а затем использовать его для перестройки руководства по просмотру / редактированию.

Основная структура DOM выглядит следующим образом:

function saveGuide() {
  numberOfSheets = $(".sheet").length;
  console.log("number of sheets:", numberOfSheets);
  sheetCounter = 1;
  for (i = 0; i < numberOfSheets; i++) {
    var saveSheets = $(".sheet")
      .map(function() {
        return {
          sheetName: $(this).attr("data-id"),
          width: ($(this).width() + 1) / 80,
          height: ($(this).height() + 1) / 80,
          // Map the pieces in the sheet
          pieces: (saveSheets = $(
              ".sheet[data-sheetnumber='" + sheetCounter + "'] .piece"
            )
            .map(function() {
              return {
                pieceName: $(this).attr("data-name"),
                pieceColor: $(this).attr("data-color"),
                pieceWidth: ($(this).width() + 4) / 80,
                pieceHeight: ($(this).height() + 4) / 80,
                pieceXPOS: $(this).position().left / 80,
                pieceYPOS: $(this).position().top / 80
              };
            })
            .get())
        };
      })
      .get();
    sheetCounter++;
  }

  myJSON = JSON.stringify(saveSheets);
  
  console.log(myJSON);
}

saveGuide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sheet">
  <div class="piece"></div>
  <div class="piece"></div>
  <div class="line"></div>
</div>
<div class="sheet">
  <div class="piece"></div>
  <div class="piece"></div>
  <div class="line"></div>
</div>

Таким образом, каждый лист попадает в массив просто отлично, но кусочки всегда одинаковы и с последнего листа. Я предполагаю, что переменная перезаписывает себя с каждым циклом ...

Вот ссылка на то, как выглядят данные при сохранении: https://codebeautify.org/jsonviewer/cbff77c4

Вы можете видеть, что оба листа имеютте же самые части перечислены.

Я либо очень близок к тому, чтобы приступить к работе, либо я слишком далек от того, как я создал функцию. Но я чувствую, что мой мозг немного тает прямо сейчас и может использовать помощь или предложения по поводу того, на что мне нужно обратить внимание.

Очень признателен.

Answer 1

Вы можете использовать .children([selector]), чтобы получить дочерние элементы определенного элемента. Если вы установите селектор, будут возвращены только совпадающие дочерние элементы.

В вашем случае вы должны использовать $(this).children('.piece') (или $sheet.children('.piece') в примере), чтобы получить части, относящиеся к каждому листу:

function saveGuide() {
  return $(".sheet")
    .map(function() {
      var $sheet = $(this);

      return {
        sheetName: $sheet.attr("data-id"),
        width: ($sheet.width() + 1) / 80,
        height: ($sheet.height() + 1) / 80,
        // Map the pieces in the sheet
        pieces: $sheet.children('.piece')
          .map(function() {
            var $piece = $(this);
            return {
              pieceName: $piece.attr("data-name"),
              pieceColor: $piece.attr("data-color"),
              pieceWidth: ($piece.width() + 4) / 80,
              pieceHeight: ($piece.height() + 4) / 80,
              pieceXPOS: $piece.position().left / 80,
              pieceYPOS: $piece.position().top / 80
            };
          })
          .get()
      };
    })
    .get();
}

var saveSheets = saveGuide();
console.log("number of sheets:", saveSheets.length);

var myJSON = JSON.stringify(saveSheets);
console.log(myJSON);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sheet">
  <div class="piece" data-name="sheet1-1"></div>
  <div class="piece" data-name="sheet1-2"></div>
  <div class="line"></div>
</div>
<div class="sheet">
  <div class="piece" data-name="sheet2-1"></div>
  <div class="piece" data-name="sheet2-2"></div>
  <div class="line"></div>
</div>