2016-06-04 14 views
-3

Ich versuche, durch den folgenden Code durchlaufen und versuchen, Werte in einem Array zu erhalten. Da es für jede Formulargruppe zwei Eingabefelder gibt, muss ich alle in einem 2D-Array speichern. Ich habe es versucht, aber es wird nicht richtig in Array abgerufen. Ich habe dafür .each benutzt. Aber fest und nicht richtig Array bekommen. Auch neue Formulargruppe fügt beim Hinzufügen neue hinzu. Bitte hilf mir das zu lösen..each Schleife mit mehrdimensionalen Array

<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); 
+0

können Sie uns Ihren .each Code zeigen? – JordanHendrix

+0

* "Fragen, die Debugging-Hilfe suchen (" Warum funktioniert dieser Code nicht? ") Müssen das gewünschte Verhalten, ein spezifisches Problem oder einen Fehler und den kürzesten Code enthalten, der für die Reproduktion in der Frage benötigt wird." * –

+0

* "Ich habe versucht "* ... Sie sollten uns zeigen, was Sie versucht haben, damit die Leute helfen können, das zu beheben ... nicht eine komplette Lösung für Sie schreiben, da dies kein Code-Schreib-Service ist – charlietfl

Antwort

1

Sie können wie diese mit reinem JS leicht tun

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>

0

I solution.See unten gemacht haben.

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

Nur für den Fall, wenn andere mit demselben feststecken. :)

Verwandte Themen