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

Question

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

该项目

我妈妈是一位美术老师，她花费大量时间为她的项目制作剪纸指南。 我正在为她开发一个工具，让她可以通过她的网站快速构建和分享指南。 她的网站是用 wordpress 构建的，所以我使用 jQuery 和 jQuery UI 构建了该工具。 下面是它在行动中的样子：

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

UI 运行良好，可以继续保存数据，这就是我遇到麻烦的地方。

问题

我想根据 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

您可以看到两张表都列出了相同的部分。

我要么非常接近上班，要么离我如何构建 function 还差得很远。 但我觉得我的大脑现在有点融化，可以就我需要查看的内容提供帮助或建议。

非常感激。

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>