javascript - 将对象数组中的值插入到一组元素中

Question

我有一个对象数组，想将它们的值插入到一组输入中。我认为使用 jQuery 的 val() 在几个 for 循环中批量分配这些值，但它只返回两个对象的最后一个值。我究竟做错了什么？更妙的是，是否有更好的方法来执行此操作而无需循环 3 次？

$(function() {
  var arr = [{v1: 1, v2: 2, v3: 3, v4: 4}, {v1: 5, v2: 6, v3: 7, v4: 8}];
  
  for (var i = 0; i < arr.length; i++) {
    for (key in arr[i]) {
      $('input').val(function(index) {
        return arr[i][key]
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

<div>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

Answer 1

$('input') 将检索页面上的所有 8 个输入。因此，当您调用 $('input').val(newVal) 时，您正在设置 所有 8 个输入 的值。这就是为什么所有输入在您的代码运行后都具有最后一个值的原因。

一种解决方案是首先检索所有输入并遍历输入:

$(function() {
  var arr = [{v1: 1, v2: 2, v3: 3, v4: 4}, {v1: 5, v2: 6, v3: 7, v4: 8}];
  var $inputs = $("input");
  var currentIndex = 0;
  
  for (var i = 0; i < arr.length; i++) {
    for (key in arr[i]) {
      $inputs.eq(currentIndex++).val(arr[i][key]);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

<div>
  <input type="text" />
  <input type="text" />
  <input type="text" />
  <input type="text" />
</div>

不，如果没有至少 2 个循环，我想不出一种方法来完成这项任务。数组中有要迭代的项，数组中的对象中有要迭代的项。