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

我有一个对象数组并希望将其值插入一组输入中。我认为使用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>

来源

2015-09-11 Carl Edwards

假设'arr'的结构不能改变是否正确？ – Stryner

正确。我从API中检索这些对象，但为了演示而在这里硬编码了一个小阵列。 –

$('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圈。数组中的项目可以迭代，数组中的项目可以迭代。

来源

2015-09-11 03:10:20 Stryner

感谢您的回答和解释。一个问题，但。 'currentIndex ++'如何迭代自己，它最初是从0开始的呢？它不会一直返回0吗？ –

@CarlEdwards'++'是[后递增运算符]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment_%28%29）。 'currentIndex'将返回它的值，然后增加1.这与for循环中的'i ++'是相同的操作符。 – Stryner

感谢您为我清理。 –

如果你把所有在一个单一的<div>的<input>你可以用这种方式

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

来源

2015-09-11 03:08:58

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

回答

相关问题