將對象數組中的值插入到一組元素中

我有一個對象數組並希望將其值插入一組輸入中。我認爲使用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

將對象數組中的值插入到一組元素中

回答

相關問題