javascript - 从 N 个输入中获取特定格式的值

Question

我有一个包含 N 个元素的数组，并且有一个函数以特定格式绘制这些元素，将 0, 2, 4, 6....n 中的所有元素绘制到 div 中并将 1, 3, 5, 7...n 中的所有元素放入另一个中，我用两个 for 循环来执行此操作，我对此没有任何麻烦，问题是我需要从一开始就以相同的方式将这些值放在一起，例如我有这个数组: 5, 6, 5, 6 我的 html 输出是这样的:

Div 1:
5
5
Div2:
6
6

我尝试的是创建一个数组，然后用这个函数填充它:

$('#MyDiv input').each(function () {
    array.push(this.value);
});

但是我得到以下数组:5,5,6,6而不是5,6,5,6，我该如何解决这个问题？

这是我的示例代码:

var sampled = [];
$(document).ready(function () { 
  $('#btn').click(function () {
    load();
  });
  
  $('#btn2').click(function () {
    select();
  });
});

function load() {
  var array = "5, 6, 5, 6, 5, 6";
  var lines = "";
  var lines2 = "";
  var lines3 = "";
  var splitString;
  splitString = array.split(",");
  var total = splitString.length;
  
  for (var x = 1; x <=total / 2; x++) {
    lines += '<div class="col-md-12 text-center">';
    lines += '<span class="form-control">Piece #' + x + '</span></div>';
  }
  //(1, 3, 5, 6, 7....)
  for (var i = 0; i < total; i++) {
    lines2 += '<div class="col-md-12 form-group">';
    lines2 += '<input id="Input' + i + '" value="' + splitString[i] + '" class="form-control" /></div>';
    i++;
  }
  //(0, 2, 4, 6....)
  for (var s = 0; s < total; s++) {
    s++;
    lines3 += '<div class="col-md-12 form-group">';
    lines3 += '<input id="Input' + s + '" value="' + splitString[s] + '" class="form-control" /></div>';
  }
  
  $('#Number').html(lines);
  $('#Sampled').html(lines2);
  $('#Dimen').html(lines3);
}

function select() {
  $('#Inputs input').each(function () {
        sampled.push(this.value);
    });
  alert(sampled);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="col-md-12" id="Inputs">
  <div id="Number" class="col-md-4">
  </div>
  <div id="Sampled" class="col-md-4">
  </div>
  <div id="Dimen" class="col-md-4">
  </div>
</div>

<button id="btn">Click</button>

<button id="btn2">Select</button>

还有一个here is my example

Answer 1

var div1Array = [];
var div2Array = [];
$("#Div1 input").each(function() {
    div1Array.push(this.value);
}
$("#Div2 input").each(function() {
    div2Array.push(this.value);
}
var finalArray = [];
for (var i = 0; i < div1Array.length; i++) {
    finalArray.push(div1Array[i]);
    finalArray.push(div2Array[i]);
}

这应该适用于两个大小相等的输入。您可以根据需要添加自己的逻辑来处理不同大小或两个以上的 div。