输入上的JavaScript循环创建一个对象数组

我试图在div中循环输入元素，以创建一个对象数组

<div id="time">
  <input type="text" name="from" placeholder="12:00 AM" />
  <input type="text" name="to" placeholder="12:30 AM" />
  <input type="text" name="from" placeholder="13:00 AM" />
  <input type="text" name="to" placeholder="13:30 AM" />
</div>

这是我到目前为止尝试过的，但结果完全不同

var dataArray = []
$("#time").find('input').each(function() {
  var data = {};

  data[this.name] = this.value
  dataArray.push(data);

});
console.log(dataArray)

---

您需要迭代name属性等于form的每个备用输入元素，而不是迭代每个输入。然后为正在迭代的元素和紧接着的下一个同级输入元素创建JSON信息

此外，12.30 am不是元素的值，它是占位符。您需要用占位符替换该值：

$("#time").find('input[name="from"]').each(function() {
    var data = {};
    data[this.name] = this.placeholder;
    var nextInput = $(this).next()[0];
    data[nextInput .name] = nextInput.placeholder;
    dataArray.push(data);
});

实现这一点的最佳方法是使用jQuery

.map（）

函数返回JSON对象以及

.get（）

来创建JSON对象数组：

var dataArray = $("#time").find('input[name="from"]').map(function() {
    var nextInput = $(this).next()[0];
    var jo = {};
    jo[this.name]=this.placeholder;jo[nextInput.name] = nextInput.placeholder
    return jo;
}).get();

var dataArray=$（“#time”）.find（'input[name=“from”]）.map（function（）{
var nextInput=$（this.next（）[0]；
var jo={}；
jo[this.name]=this.placeholder；jo[nextInput.name]=nextInput.placeholder
返回jo；
}).get（）；
console.log（数据数组）

---

您可以从中迭代名称属性值为

的所有元素。要获取
To
值，请使用jQuery的
next（）
方法

使用
.val（）
方法获取项的值。
$（“#提交”）。单击（函数（）{
var数据=[]；
$（'#时间输入[name=“from”]”）。每个（函数（）{
数据推送({
from:$（this.val（），
收件人：$（this.next（）.val（））
});
});
控制台日志（数据）；
});

在下面的文本框中输入时间
提交
此处，您需要使用事件处理程序更改任何
输入的值，或者需要为这些输入提供一些初始值

您还可以如下所示进行迭代以获得所需的结果


var-dataArray=[]；
变量数据={}；
$（“#time”）.find（'input'）。每个（函数（i）{
如果（i%2==0）{
数据={}；
data[this.name]=this.value；
}否则{
data[this.name]=this.value；
推送（数据）；
}
});
log（数据数组）
在我的回答中，只有当
this.name==”来自“
时，我才会将新项推送到数组中。如果
this.name==”到“
，我会将新属性添加到最后一个推送的项，最后我们在数组中有2个对象，每个对象中有2个属性：


$（“#btn”）。单击（doStuff）；
函数doStuff（）{
var dataArray=[]
新排列长度；
$（“#time”）.find（'input'）.each（function（）{
如果（this.name==“from”）{
变量数据={}；
data[this.name]=this.value
newArrayLength=dataArray.push（数据）；
}else if（this.name==“to”）{
dataArray[newArrayLength-1][this.name]=this.value；
}
});
log（数据数组）；
}

单击
我会用FormData解决它。这意味着，如果以后更改标记，DOM导航更少，出错的机会也更少。这还意味着您必须将div元素更改为form元素（除非您将其放在更高的位置-在这种情况下，您可以在构造函数中使用该form元素并保留div元素）：


//获取formdata实例
var fd=新表单数据（时间）
//获取所有值
var from=fd.getAll（'from'）
var to=fd.getAll（'to'）
//转化
var unavailable=from.map（（from，i）=>（{from，to:to[i]}））
console.log（{unavailable}）
您可以通过以下方式执行此操作：


var不可用性=[]；
$（“#时间输入[name=from]”）。每个（函数（i，输入）{
不可用推送({
from:$（this.attr（'placeholder'）.split（''）[0]，
收件人：$（this.next（）.attr（'placeholder'）.split（''）[0]
});
});
控制台日志（不可用）

查看两次
dataArray
是否应该
var fd=new FormData（time）
be
..（'time'）
？在这种情况下是的（如果您懒惰），通常您会执行
var time=document.getElementById（'time'））
但是任何id在全局窗口范围中没有名称的元素都可以从
窗口访问。阅读这有点冒险，但为了这个简单的演示，我选择了使用
..（'time'）
在同一
中，不应该有多个具有相同
名称
属性的输入。（除非是单选按钮）我想他真正想得到的是值，而不是占位符。@Tushar如果你能帮我解决这个问题就更好了
var dataArray = $("#time").find('input[name="from"]').map(function() {
    var nextInput = $(this).next()[0];
    var jo = {};
    jo[this.name]=this.placeholder;jo[nextInput.name] = nextInput.placeholder
    return jo;
}).get();

var dataArray = [];
$("#time").find('input[name="from"]').each(function() {
    var data = {};
    data.from = this.value;
    data.to = $(this).next().val();
    dataArray.push(data);
});

console.log(dataArray);