.each 带有多维数组的循环[关闭]答案

【问题标题】：.each loop with multidimensional array [closed].each 带有多维数组的循环[关闭]
【发布时间】：2016-06-04 16:36:28
【问题描述】：

我正在尝试遍历下面的代码并尝试获取数组中的值。由于每个表单组都有两个输入字段，我知道我需要将所有内容存储在二维数组中。我试过了，但它没有正确检索数组。我为此使用了 .each 。但是卡住了，没有得到正确的数组。单击添加新的也将添加新的表单组。请帮我解决这个问题。

<div class="form-group sm-tableBox">
    <div class="input-box">
        <strong>1st</strong>
    </div>
    <div class="input-box">
        <input type="number" name="" class="form-control" />
        <span class="hint">mm</span>
    </div>
    <div class="input-box ico">
        <i class="fa fa-times" aria-hidden="true"></i>
    </div>
    <div class="input-box">
        <input type="number" name="" class="form-control" />
        <span class="hint">mm</span>
    </div>
</div>
<div class="form-group sm-tableBox">
    <div class="input-box">
        <strong>2nd</strong>
    </div>
    <div class="input-box">
        <input type="number" name="" class="form-control" />
        <span class="hint">mm</span>
    </div>
    <div class="input-box ico">
        <i class="fa fa-times" aria-hidden="true"></i>
    </div>
    <div class="input-box">
        <input type="number" name="" class="form-control" />
        <span class="hint">mm</span>
    </div>
</div>
<div class="form-group sm-tableBox">
    <div class="input-box">
        <strong>3rd</strong>
    </div>
    <div class="input-box">
        <input type="number" name="" class="form-control" />
        <span class="hint">mm</span>
    </div>
    <div class="input-box ico">
        <i class="fa fa-times" aria-hidden="true"></i>
    </div>
    <div class="input-box">
        <input type="number" name="" class="form-control" />
        <span class="hint">mm</span>
    </div>
</div>



$(".btn-submit").click(function() {
    var i = 0;
    var j = 0;
    var parent = [];
    var child = [];
    $(" .form-group").each(function(){
        $(".input-box").each(function(){
            child[j] = $r('input[class=form-control]').val();
            j++;
        });
        parent[i] = child[j];
        i++;
        j=0;
    });
    console.log(parent);

【问题讨论】：

你能告诉我们你的 .each 代码吗？
“寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题中重现它所需的最短代码自己。”
“我已经尝试过” ...您应该向我们展示您尝试过的内容，以便人们可以帮助解决这个问题...不要为您编写完整的解决方案，因为这是不是代码编写服务
请查看更新后的问题。
您的主要问题不是只查看$(" .form-group") .... $(" .form-group").each(function(i){ $(this).find(".input-box").each.... 实例中的输入，否则您每次都在页面中迭代每个$(".input-box")。注意使用$(this).find()。在内部 each 内部使用 this.value 或 $(this).val() 作为输入实例的值

标签： javascript arrays multidimensional-array

【解决方案1】：

你可以像这样使用纯 JS 轻松完成

var nodes = document.querySelectorAll(".form-group"),
     divs = Array.prototype.slice.call(nodes,0),
      arr = [],
updateArr = e => {arr = divs.map(d => Array.prototype.slice.call(d.querySelectorAll(".form-control")).reduce((v,e) => v.concat(e.value),[])); console.log(JSON.stringify(arr))};

divs.forEach(d => d.addEventListener("change",updateArr,false));

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <h1>Hello Plunker!</h1>
<div class="form-group sm-tableBox">
    <div class="input-box">
        <strong>1st</strong>
    </div>
    <div class="input-box">
        <input type="number" name="" class="form-control" />
        <span class="hint">mm</span>
    </div>
    <div class="input-box ico">
        <i class="fa fa-times" aria-hidden="true"></i>
    </div>
    <div class="input-box">
        <input type="number" name="" class="form-control" />
        <span class="hint">mm</span>
    </div>
</div>
<div class="form-group sm-tableBox">
    <div class="input-box">
        <strong>2nd</strong>
    </div>
    <div class="input-box">
        <input type="number" name="" class="form-control" />
        <span class="hint">mm</span>
    </div>
    <div class="input-box ico">
        <i class="fa fa-times" aria-hidden="true"></i>
    </div>
    <div class="input-box">
        <input type="number" name="" class="form-control" />
        <span class="hint">mm</span>
    </div>
</div>
<div class="form-group sm-tableBox">
    <div class="input-box">
        <strong>3rd</strong>
    </div>
    <div class="input-box">
        <input type="number" name="" class="form-control" />
        <span class="hint">mm</span>
    </div>
    <div class="input-box ico">
        <i class="fa fa-times" aria-hidden="true"></i>
    </div>
    <div class="input-box">
        <input type="number" name="" class="form-control" />
        <span class="hint">mm</span>
    </div>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

我已经解决了。见下文。

 $r(".btn-submit").click(function() {  
    var parent = [];
    var child = []; 
    $r(".worktopmeas").each(function(){
        $r(this).find(".form-control").each(function(){
            if($r(this).val()!="")
            child.push($r(this).val());  
        });
        if(child.length!=0)
             parent.push([child[0],child[1]]);
        child.length = 0;
        //console.log(child);

    });
    console.log(parent);

以防万一其他人坚持相同。 :)

【讨论】：