循環遍歷 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>