javascript - 如何获取多个输入作为数组或对象？

Question

这个问题已经有答案了:

Sending parts of form using jQuery serialize() and AJAX (4 个回答)

已关闭 3 年前。

我目前正在尝试从多个输入构建一个对象。例如，当我有这样的结构时:

<div class="wrapper">
    <div class="row">
        <input class="text" name="text" value="This is a text"/>
        <input class="float" name="float" value="1.44"/>
    </div>
    <div class="row">
        <input class="text" name="text" value="Pig"/>
        <input class="float" name="float" value="1.22"/>
    </div>
    <div class="row">
        <input class="text" name="text" value="Chicken"/>
        <input class="float" name="float" value="1.11"/>
    </div>
    <div class="row">
        <input class="text" name="text" value="Lava"/>
        <input class="float" name="float" value="1"/>
    </div>
</div>

我需要将每一行作为对象中的单个条目，以便每个对象条目都有一个键 text和一把 key float :

const entry = {
    text: "This is a text",
    float: 1.44
};

const result = [
    entry
];

我完全不知道如何在这样的结构中获取所有输入(这是向我的后端执行 AJAX 请求所必需的)。也许你能给我一个提示或想法如何完成这件事？非常感谢!

Answer 1

或者在 js 中你可以这样做:

let result = [...document.querySelectorAll('.row')].map( div => ({text:div.children[0].value, float:div.children[1].value}) )

console.log(result)

<div class="wrapper">
    <div class="row">
        <input class="text" name="text" value="This is a text"/>
        <input class="float" name="float" value="1.44"/>
    </div>
    <div class="row">
        <input class="text" name="text" value="Pig"/>
        <input class="float" name="float" value="1.22"/>
    </div>
    <div class="row">
        <input class="text" name="text" value="Chicken"/>
        <input class="float" name="float" value="1.11"/>
    </div>
    <div class="row">
        <input class="text" name="text" value="Lava"/>
        <input class="float" name="float" value="1"/>
    </div>
</div>