如何使用jQuery获取数字输入框的值并将其存入数组？技术求助

看你现在的代码是先把数字输入框的ID存入数组，之后再循环通过ID去获取输入框的值——其实咱们可以更高效一步到位，直接把输入框的值存入数组，甚至如果需要关联ID和值的话，存成对象数组会更方便。

先说说原代码的小问题 #

你当前的arr.push(this.id)存的是输入框的ID，不是实际的数值，所以后续还要额外通过ID去查询DOM获取val()，多了一次DOM遍历的开销，逻辑也绕了一圈。

优化方案1：直接收集输入框的值到数组 #

如果只需要输入框的数值，用map()方法可以直接生成数组，比each()更简洁：

// 直接获取所有数字输入框的数值，转成数字类型并存入数组
var inputValues = $('.tblPartial input[type="number"]').map(function() {
  var inputVal = $(this).val();
  // 这里可以做简单的有效性判断，空值或者非数字的情况按需处理
  return inputVal && !isNaN(inputVal) ? Number(inputVal) : null;
}).get(); // 把jQuery对象转换为普通JavaScript数组

这样inputValues里就直接存了所有输入框的有效数值，后续使用的时候直接遍历数组就行。

优化方案2：同时存储ID和对应的值（如果需要关联） #

如果后续需要用到输入框的ID来关联其他元素（比如你代码里的ec_开头的元素），可以把每个输入框的ID和值存成对象，组成对象数组，这样后续遍历的时候不用再查DOM，更高效：

// 收集每个数字输入框的ID和对应数值
var inputData = $('.tblPartial input[type="number"]').map(function() {
  var $input = $(this);
  var inputVal = $input.val();
  return {
    id: $input.attr('id'),
    value: inputVal && !isNaN(inputVal) ? Number(inputVal) : null
  };
}).get();

// 遍历使用的示例
$.each(inputData, function(i, item) {
  var split = item.id.split('_');
  var expCount = $('#ec_' + split[1] + '.expCount').html();
  console.log(expCount + "\n" + item.value);
});

额外小提示 #

• 输入框的val()方法返回的是字符串类型，所以最好转成Number类型，避免后续做数值运算时出问题
• 可以根据你的业务需求调整空值/无效值的处理逻辑，比如把null换成0或者直接过滤掉（用filter()方法）

内容的提问来源于stack exchange，提问作者Rgnr