Javascript Can'；无法获取动态表单的所有值

我有这个HTML：

<div id="custom_options" >
<div class="options_group">
    <div class="form-group  col-md-12 ">
        <label class="control-label" for="opt_group">group</label>
        <input type="text" class="form-control" name="opt_group" value="" autocomplete="true">
    </div>
    <div id="props" class="form-group bg-grey">
        <div class="form-group  col-md-5 ">
            <label class="control-label" for="opt_title">title</label>
            <input type="text" class="form-control" name="opt_title" value="">
        </div>
        <div class="form-group  col-md-1 ">
            <label class="control-label" for="opt_procent">procent</label>
            <input type="number" min="0" class="form-control" name="opt_procent" value="0">
        </div>
        <div class="form-group  col-md-6 ">
            <label class="control-label" for="opt_title">image</label>
            <input type="text" class="form-control" name="opt_image"value="">
        </div>
    </div>

    <div id="props" class="form-group bg-grey">
        <div class="form-group  col-md-5 ">
            <label class="control-label" for="opt_title">title</label>
            <input type="text" class="form-control" name="opt_title"  value="">
        </div>
        <div class="form-group  col-md-1 ">
            <label class="control-label" for="opt_procent">procent</label>
            <input type="number" min="0" class="form-control" name="opt_procent" value="0">
        </div>
        <div class="form-group  col-md-6 ">
            <label class="control-label" for="opt_title">image</label>
            <input type="text" class="form-control" name="opt_image" value="">
        </div>
    </div>
</div>

据我所知，在这种情况下，最简单的方法是通过我自己的脚本生成JSON，但我无法获得所需的道具

我试过这个：

    function opt_convert(){
    var data='';
    $('#custom_options').find('.options_group').each(function() {
        let groupname = $(this).find("input[name='opt_group']").val();

        alert(groupname);
    }).find('#props').each(function() {
            let name = $(this).find("input[name='opt_title']").val();
            let procent = $(this).find("input[name='opt_procent']").val();
            let image = $(this).find("input[name='opt_image']").val();
            alert(name);
    });

    document.getElementById("options").value = data;
}

---

获取对象数组的循环需要嵌套在查找选项组的循环中，而不是与之平行。使用组名作为对象的键，然后使用

.map（）

返回包含所有输入值的对象

函数opt_convert（）{
让数据={}；
$（“#自定义_选项”）。查找（“.options_组”）。每个（函数（）{
让groupname=$（this.find）（“输入[name='opt_group']”）val（）；
console.log（groupname）；
数据[组名]=
$（this.find（'.props'）.map（function（）{
让name=$（this.find）（“输入[name='opt_title']”）val（）；
让procent=$（this.find）（“input[name='opt_procent']”）val（）；
让image=$（this.find）（“输入[name='opt_image']”）val（）；
返回{
名称
普罗森特，
形象
};
}).get（）；
});
控制台日志（数据）；
}
$（“#doit”）。单击（opt#u convert）

组
标题
普罗森特
形象
标题
普罗森特
形象
显示数据
更重要的是，ID应该是唯一的。您不能有多个
id=“props”
。使用class.@Mr.polywhill实际上，您可以有多个同名字段。这对于单选按钮是必需的，因为名称定义了组。重复
name=“field[]”
来创建值数组也是很常见的。@Barmar是的，你说得对，但它们会遇到并行数组。如果有一个字段接受多个输入，则很难区分每个“对象”的“值”。看起来它现在可以工作了，谢谢/问题出在ID而不是类中。我不知道JQ真的很在意
    function opt_convert(){
    var data='';
    $('#custom_options').find('.options_group').each(function() {
        let groupname = $(this).find("input[name='opt_group']").val();

        alert(groupname);
    }).find('#props').each(function() {
            let name = $(this).find("input[name='opt_title']").val();
            let procent = $(this).find("input[name='opt_procent']").val();
            let image = $(this).find("input[name='opt_image']").val();
            alert(name);
    });

    document.getElementById("options").value = data;
}