jQuery从大型表单创建/添加到多维数组

Question

我不明白jQuery是如何处理多维数组的。

我在一个向导插件中有一个非常大的表单。在一个步骤中，可能有多达10个选项卡，每个选项卡中可能有几十个文本输入。我正在尝试使用.each来收集所有文本输入，并将它们排列在一个多维数组中。

var ItemsArray = [];
var ItemGroup = [];
$('.GroupOfTabs').each(function() { //for each tab
  var TabName = $(this).val();

  //for each input inside each tab
  $('#step-3 tr[room='+TabName+'][object=item]').each(function() { 
    var value1 = $('#step-3 input[tab='+TabName+'][other=value1]).val();
    var value2 = $('#step-3 input[tab='+TabName+'][other=value2]).val();
    var value3 = $('#step-3 input[tab='+TabName+'][other=value3]).val();
    var value4 = $('#step-3 input[tab='+TabName+'][other=value4]).val();

    ItemGroup.push( {value1, value2}, {value3, value4} );   
    ItemsArray[TabName].push(ItemGroup);
  });
});

HTML看起来像这样：

<div class="GroupOfTabs" value="tab1">
  <table>
    <tr room="tab1" object=item>
      <td><input tab=tab1 other=value1></td>
      <td><input tab=tab1 other=value2></td>
      <td><input tab=tab1 other=value3></td>
      <td><input tab=tab1 other=value4></td>
    </tr>
  </table>
</div>

对于许多选项卡和更多的输入，也是如此。

所以我希望的是一个很好的有组织的多维数组，就像这样：

ItemsArray
{
     Tab1 : { value1 : value2 }, {value3 : value4}
     Tab2 : { value1 : value2 }, {value3 : value4}
     Tab3 : { value1 : value2 }, {value3 : value4}
}

//An easier way for me to articulate the array structure is php style:

(ItemsArray => array( Tab1 => array(value1 => value2, value3 => value4),
               array( Tab2 => array(value1 => value2, value3 => value4),
               array( Tab3 => array(value1 => value2, value3 => value4))

我甚至不打算展示我得到的实际输出是什么……可以放心地假设它是一个可怕的烂摊子。它甚至没有返回所有的文本输入，只是每个选项卡的第一个。

正确的方式？

提前感谢！

Answer 1

您正在将变量定义为数组，但是根据您期望的输出，看起来您确实希望使用对象。我们不太了解您的文档结构，因此以下内容仅是根据您尝试的内容进行的猜测。

(我假设您在value1-value4中获得了正确的值。)

var ItemsArray = {}; $('.GroupOfTabs').each(function() { //for each tab   var TabName = $(this).val();

  //for each input inside each tab   $('#step-3 tr[room='+TabName+'][object=item]').each(function() { 
    var value1 = $('#step-3 input[tab='+TabName+'][other=value1]').val();
    var value2 = $('#step-3 input[tab='+TabName+'][other=value2]').val();
    var value3 = $('#step-3 input[tab='+TabName+'][other=value3]').val();
    var value4 = $('#step-3 input[tab='+TabName+'][other=value4]').val();

    ItemsArray[TabName] = [ { value1 : value2 } , { value3 : value4 } ];   }); });

脱离这样的上下文，ItemsArray的结构对我来说并没有多大意义。假设您的样例输出确实是您想要的，我认为这应该是可行的。