我试图在div中循环输入元素，以创建一个对象数组
unavailability: [
{ from: '12:00', to: '12:30' },
{ from: '13:00', to: '13:30' }
]
我试图创建以下对象数组。
var dataArray = []
$("#time").find('input').each(function() {
var data = {};
data[this.name] = this.value
dataArray.push(data);
});
console.log(dataArray)
这是我到目前为止所尝试的，但结果却截然不同。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
{{1}}
答案 0 :(得分：12)
您可以遍历名称属性值为from的所有元素。要获取to值，请使用jQuery的next()方法。
使用.val()方法获取item的值。
$('#submit').click(function() {
var data = [];
$('#time input[name="from"]').each(function() {
data.push({
from: $(this).val(),
to: $(this).next().val()
});
});
console.log(data);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter times in the below textboxes
<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>
<button id="submit">Submit</button>
答案 1 :(得分：8)
我会用FormData解决它。如果您稍后更改标记，则意味着更少的DOM导航和更少出错的可能性。这也意味着你必须将你的div元素更改为一个表单元素（除非你把它放在更高的位置 - 在这种情况下你可以在构造函数中使用该表单元素并保留div元素）：
// Get a formdata instance
var fd = new FormData(time)
// Get all values
var from = fd.getAll('from')
var to = fd.getAll('to')
// Transform
var unavailable = from.map((from, i) => ({ from, to: to[i] }))
console.log({unavailable})<form id="time">
<input type="text" name="from" placeholder="12:00 AM" value="12:00" />
<input type="text" name="to" placeholder="12:30 AM" value="12:30" />
<input type="text" name="from" placeholder="13:00 AM" value="13:00" />
<input type="text" name="to" placeholder="13:30 AM" value="13:30" />
</form>顺便说一下，你混合了12/24小时（13:00）。它应该写成下午1点（？）。
我也会将类型更改为type="time"以避免错误。它为您提供了一个很好的时间选择器，如果用户输入12或24小时值，它会对值进行标准化。
如果您需要，您还可以使用step / min / max / required进行更好的验证
答案 2 :(得分：4)
不是迭代每个输入，而是需要遍历name属性等于form的每个备用输入元素。然后为要迭代的元素和下一个兄弟输入元素创建JSON信息。
上午12点30分不是元素的值，它的占位符。您需要使用占位符替换值：
$("#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);
});
<强> Working Demo
实现此目的的最佳方法是使用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
return jo;
}).get();
console.log(dataArray)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
答案 3 :(得分：3)
您可以通过以下方式执行此操作：
var unavailability = [];
$('#time input[name=from]').each(function(i, input){
unavailability.push({
from: $(this).attr('placeholder').split(' ')[0],
to: $(this).next().attr('placeholder').split(' ')[0]
});
});
console.log(unavailability);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
答案 4 :(得分：1)
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);
答案 5 :(得分：1)
在这里，您需要使用事件处理程序来更改任何input的值，或者您需要为这些输入提供一些初始值。
您也可以如下所示进行迭代以获得所需的结果。
var dataArray = [];
var data = {};
$("#time").find('input').each(function(i) {
if(i%2 === 0){
data={};
data[this.name] = this.value;
} else{
data[this.name] = this.value;
dataArray.push(data);
}
});
console.log(dataArray);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="time">
<input type="text" name="from" placeholder="12:00 AM" value="12:00 AM" />
<input type="text" name="to" placeholder="12:30 AM" value="12:30 AM" />
<input type="text" name="from" placeholder="13:00 AM" value="13:00 AM" />
<input type="text" name="to" placeholder="13:30 AM" value="13:30 AM" />
</div>
<span id="output"></span>
答案 6 :(得分：0)
在我的回答中，我只在this.name === "from"时将新项目推送到数组。如果this.name === "to"，我将新属性添加到最后推送的项目，最后我们在数组中有2个对象，每个对象有2个属性：
$("#btn").click(doStuff);
function doStuff() {
var dataArray = []
var newArrayLength;
$("#time").find('input').each(function() {
if (this.name === "from") {
var data = {};
data[this.name] = this.value
newArrayLength = dataArray.push(data);
} else if (this.name === "to") {
dataArray[newArrayLength - 1][this.name] = this.value;
}
});
console.log(dataArray);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<span id="output"></span>
<button id="btn">Click</button>