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

Question

我有一个对象数组，想将它们的值插入到一组输入中。我认为使用 jQuery 的 val() 在几个 for 循环中批量分配这些值，但它只是 returns 两个对象的最后一个值。我究竟做错了什么？更好的是，有没有更好的方法来做到这一点而不必循环 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> 放在一个 <div> 中，你可以使用这种方式

var arr = [{v1: 1, v2: 2, v3: 3, v4: 4}, {v1: 5, v2: 6, v3: 7, v4: 8}];
var c = 1;
$inputs = $('input');
$.each(arr, function(i){
   $.each(arr[i], function(j){
     $('input:nth-child('+[c]+')').val(arr[i][j]);
     c++;
   })
});

你可以在这个JSFiddle

中看到它在工作

Answer 2

$('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 个循环来完成此任务的方法。数组中有项目要迭代，数组中的对象中有项目要迭代。

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

Inserting values from an array of objects into a set of elements

javascript

jquery

loops

object

key-value