从循环动态制作Javascript数组

时间:2013-03-18 22:20:49

标签: javascript jquery multidimensional-array

我知道有很多关于此的问题,但我找不到解决问题的方法,并且已经有一段时间了。我有两组具有相同名称的输入字段,一组用于产品代码,另一组用于产品名称。这些输入字段可以被用户带走并添加到DOM中,因此可以有多个:

这是我到目前为止所拥有的,虽然这样可以保存它,所以所有代码都在一个数组中,所有名称都在另一个数组中:

var updatedContent = [];
var varCode = {};
var varName = {};

$('.productVariationWrap.edit input[name="varVariationCode[]"]')
   .each(function(i, vali){
     varCode[i] = $(this).val();
   });

$('.productVariationWrap.edit input[name="varVariationName[]"]')
  .each(function(i1, vali1){
    varName[i1] = $(this).val();
  });

updatedContent.push(varCode);
updatedContent.push(varName);

我试图得到它,所以名称和代码进入同一个数组。即代码是K = V对的关键?

基本上我可以遍历最终数组,并且可以轻松访问代码和相关名称。

我可以很容易地在PHP中执行此操作,但在javascript中没有运气。

修改

我希望数组看起来像:

[
    [code1, name1],
    [code2, name2],
    [code3, name3]
];

因此,在我可以对主数组中的每个数组执行循环之后,我可以使用键(例如code1)和关联值(例如name1)执行某些操作。这有意义吗?它有点像一个多维数组,虽然有些人可能会反对Javascript中该语句的有效性。

3 个答案:

答案 0 :(得分:3)

我认为最好创建一个对象,以便以后可以访问键/值对而不必循环,如果你不想这样做:

var $codes = $('.productVariationWrap.edit input[name="varVariationCode[]"]'),
    $names = $('.productVariationWrap.edit input[name="varVariationName[]"]'),
    updatedContent = {};

for (var i = 0, il = $codes.length; i < il; i++) {
    updatedContent[$codes.get(i).value] = $names.get(i).value;
}

现在举例来说,updatedContent.code1 == name1,如果你愿意,你可以遍历对象:

for (var k in updatedContent) {
    // k == code
    // updatedContent[k] == name
}

答案 1 :(得分:1)

使用两个循环可能不是最佳选择。最好使用一个循环来收集所有项目,无论是代码还是名称,然后将它们组合在一起。

另一个问题:你的选择对我来说有点滑稽。你说在页面中可以有多个这样的控件,但是控件具有重复的名称是不正确的,除非它们是互斥的单选按钮/复选框 - 除非每对输入都在它自己的祖先{{1}内。 }?更多细节可以帮助我提供更好的答案。

并注意:在您的代码中,您将varCode和varName变量实例化为对象<form>,但随后将它们用作数组{}。这是你的意图吗?当我第一次回答你时,我被“最终输出应该看起来像这个数组”分散了注意力而错过了你想要一个对象中的key = value对。如果你真正的意思是你对最终结果的说法是嵌套数组,那么,你可以对你的代码进行的最小修改就是这样:

[]

但是,既然您希望var updatedContent = []; $('.productVariationWrap.edit input[name="varVariationCode[]"]') .each(function(i, vali){ updatedContent[i] = [$(this).val()]; //make it an array }); $('.productVariationWrap.edit input[name="varVariationName[]"]') .each(function(i1, vali1){ updatedContent[i1].push($(this).val()); //push 2nd value into the array }); 成为Code值的唯一索引,那么我们需要使用对象而不是数组,Name键是Code {1}}值:

Name

请注意,这将生成一个对象,符号将如下所示:

var updatedContent = {},
   w = $('.productVariationWrap.edit'),
   codes = w.find('input[name="varVariationCode[]"]'),
   names = w.find('input[name="varVariationName[]"]');

for (var i = codes.length - 1; i >= 0; i -= 1) {
   updatedContent[codes.get(i).val()] = names.get(i).val();
});

现在您可以使用{ 'code1': 'name1', 'code2': 'name2', 'code3': 'name3' }; 对象,如下所示:

updatedContent

最后,依赖于以相同顺序在单独的jQuery对象中返回的var code; for (code in updatedContent) { console.log(code, updatedContent[code]); //each code and name pair } Code输入似乎有点脆弱。确保你将正确的代码与正确的名称相关联的一些方法对我来说似乎很重要 - 即使你现在的方式正常工作,谁会说未来的页面布局修改不会破坏某些东西?我只是更喜欢显式关联,而不是依赖页面元素顺序,但你可能觉得不需要这样的担保。

答案 2 :(得分:0)

我不喜欢用两个循环解决它的方法

 var updatedContent = [] 

 $('.productVariationWrap.edit').each(function(i, vali){
     var $this = $(this)
     , tuple = [$this.find('input[name="varVariationCode[]"]').val()
                , $this.find('input[name="varVariationName[]"]').val()]

     updatedContent.push(tuple)
 });