Question

我试图遍历下面的代码并尝试获取数组中的值。由于每个表单组都有两个输入字段，我知道我需要将所有表单存储在2D数组中。我试过，但它没有正确检索数组。我已经用过.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);

Answer 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>

Answer 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);

以防万一其他人坚持使用相同的内容。：）

.each循环与多维数组

2 个答案: