gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:24:25 25 4
gpt4 key购买 nike

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

项目

我妈妈是一位艺术老师,她花了很多时间为她的项目创建 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

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

我要么非常接近开始工作,要么离如何构建该功能还很遥远。但我觉得我的大脑现在正在融化一点,可以就我需要查看的内容提供帮助或建议。

非常感谢。

最佳答案

您可以使用.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>

关于javascript - 循环遍历 DOM 元素和子元素来创建 JS 数组 - 无法理解实现此目的的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58783684/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com