2016-06-04 3 views
-3

Я пытаюсь выполнить цикл ниже кода и пытаться получить значения в массиве. Поскольку для каждой группы форм есть два поля ввода, я знаю, что мне нужно хранить все в 2D-массиве. Я пробовал, но не получал его в массиве правильно. Я использовал. Для этого. Но застрял и не получил правильный массив. Также добавляется новая группа форм при нажатии кнопки «Добавить новое». Пожалуйста, помогите мне решить это.. Loop loop с многомерным массивом

<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

вы можете показать нам ваш .cach код? – JordanHendrix

+0

* «Вопросы, требующие помощи по отладке (« почему этот код не работает? ») Должны включать в себя желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для воспроизведения в самом вопросе». * –

+0

* «У меня есть попробовал "* ... вы должны показать нам, что вы пробовали, чтобы люди могли помочь исправить это ... не написать полное решение для вас, так как это не служба написания кода – charlietfl

ответ

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>

0

Я сделал solution.See ниже.

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

На всякий случай, если какие-либо другие застряли вместе. :)

Смежные вопросы