如何使用Javascript映射每个div内的输入以创建哈希数组

Question

我有如下的HTML

<div class="link-field">
<div class="form-group assets-form">
<input type="text" name="description" id="description" class="assets-input" placeholder="For example, Youtube Link">
<input type="text" name="link" id="link" class="assets-input" placeholder="For example, https://www.youtube.com/">
</div>
<div class="form-group assets-form">
<input type="text" name="description" id="description" class="assets-input" placeholder="For example, Youtube Link">
<input type="text" name="link" id="link" class="assets-input" placeholder="For example, https://www.youtube.com/">
</div>
</div>

我尝试迭代每个资产表单，并创建如下所示的对象

[
{
"link": "http://google.com/one",
"description": "Link One"
},
{
"link": "http://google.com/two",
"description": "Link Two"
}
]

使用以下功能

$.map($('.assets-form'), function(field) {
console.log(field)
});

在这里，我无法在每个div 上循环后构建哈希

Answer 1

您可以在表单完成后启动地图功能

在我的示例中，我添加了一个按钮，在填充输入后必须单击您可以通过$(field).find({fieldSelector})恢复字段值

function mapField() {
let links = [];
links = $.map($('.assets-form'), function(field) {
return {
link:$(field).find('#link').val(),
description:$(field).find('#description').val(),
}
});
console.log(links);
}

<div class="link-field">
<div class="form-group assets-form">
<input type="text" name="description" id="description" class="assets-input" placeholder="For example, Youtube Link">
<input type="text" name="link" id="link" class="assets-input" placeholder="For example, https://www.youtube.com/">
</div>
<div class="form-group assets-form">
<input type="text" name="description" id="description" class="assets-input" placeholder="For example, Youtube Link">
<input type="text" name="link" id="link" class="assets-input" placeholder="For example, https://www.youtube.com/">
</div>
</div>
<button onclick="mapField()">map field</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>