javascript - 循环遍历 DOM 元素和子元素来创建 JS 数组 - 无法理解实现此目的的最佳方法

Question

非常感谢您在我的这个问题上花费的时间。

项目

我妈妈是一位艺术老师，她花了很多时间为她的项目创建 Papercut 指南。我正在为她开发一个工具，让她能够通过她的网站快速构建和共享指南。她的网站是使用 WordPress 构建的，因此我使用 jQuery 和 jQuery UI 构建了该工具。下面是它的实际效果:

/image/z3Y5C.gif

用户界面运行良好，可以继续保存数据，而这正是我遇到麻烦的地方。

问题

我想根据 jquery 创建的 DOM 元素创建一个数组。计划是将数组保存到 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>