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

Question

我试图循环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>

我正在尝试创建以下对象数组.

 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>

的jsfiddle

Answer 1

您可以迭代所有名称属性值为的元素from.要获取to值,请使用next()jQuery方法.

使用.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>

Answer 2

我会用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进行更好的验证