以特定格式

时间:2016-12-14 14:55:46

标签: javascript jquery

我有一个包含N个元素的数组,我有一个函数以特定格式绘制这些元素,所有元素从0, 2, 4, 6....n到div,所有元素从1, 3, 5, 7...n到另一个,I用两个循环做这个,我没有遇到麻烦,问题是我需要从头开始以相同的方式组合这些值,例如我有这个数组:5, 6, 5, 6 my 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);
}
&#13;
<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>
&#13;
&#13;
&#13;

here is my example

2 个答案:

答案 0 :(得分: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,具体取决于您的需要。

答案 1 :(得分:0)

您可以将三个for循环折叠为this rewritten version中的循环,这样您就不必更改创建sampled数组的方式。