javascript循环数组中的项目

时间:2014-10-06 14:36:40

标签: javascript jquery arrays markup

我的脑子现在正在画一个空白..我有几个月的时间:

var month_array = new Array();

month_array[0] = "January";
month_array[1] = "February";
month_array[2] = "March";
month_array[3] = "April";
month_array[4] = "May";
month_array[5] = "June";
month_array[6] = "July";
month_array[7] = "August";
month_array[8] = "September";
month_array[9] = "October";
month_array[10] = "November";
month_array[11] = "December";

我试图将标记输出为:

<ul>
  <li>  January & Feburary </li>
  <li>  March & April </li>
etc.
</ul>  

通过数组循环不是一个问题,但我现在无法弄清楚是一种优雅的方式来循环遍历数组中的每两个项目..

我能够通过使用下面的方式来按照我需要的方式格式化数组,但我认为这不是一个很好的方向,因为它是多余的。

var months =  month_array.map(function(elem,i,arr){
                return [elem, (i+1<arr.length) ? arr[i+1] : null];
            }).filter(function(elem,i){
                return (i%2);
            });

任何人都知道在数组中按2项分组的最佳方法吗?

4 个答案:

答案 0 :(得分:4)

有时候.for loop就足够了! 为什么不在内部循环尝试month_array[++i];或在i += 2语句中更简单,更好.for

演示1:

var month_array = new Array();
var cList = $('ul.mylist')
month_array[0] = "January";
month_array[1] = "February";
month_array[2] = "March";
month_array[3] = "April";
month_array[4] = "May";
month_array[5] = "June";
month_array[6] = "July";
month_array[7] = "August";
month_array[8] = "September";
month_array[9] = "October";
month_array[10] = "November";
month_array[11] = "December";

for (var i = 0, l = month_array.length; i < l; i+=2) {
var final = month_array[i] + " & " + month_array[i + 1]; 
var li = $('<li/>').html(final).appendTo(cList);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mylist">
</ul>
演示2 - 选择演示1更好!:
var month_array = new Array();
var cList = $('ul.mylist')
month_array[0] = "January";
month_array[1] = "February";
month_array[2] = "March";
month_array[3] = "April";
month_array[4] = "May";
month_array[5] = "June";
month_array[6] = "July";
month_array[7] = "August";
month_array[8] = "September";
month_array[9] = "October";
month_array[10] = "November";
month_array[11] = "December";

for (var i = 0, l = month_array.length; i < l; i++) {
  var final = month_array[i] + " & " + month_array[++i];
  var li = $('<li/>').html(final).appendTo(cList);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mylist">
</ul>

答案 1 :(得分:1)

虽然我认为在评论中使用@Regent建议的常规for循环更容易,但您可以使用array.reduce执行此操作:

var months = month_array.reduce(function (pre, curr, idx, arr) {
    if (!(idx % 2)) {
        pre.push([curr, arr[idx + 1]]);
    }
    return pre;
}, []);

console.log(months);

这将为您提供一个包含六个数组的数组,每个数组包含两个月,从["January","February"]

开始

注意:如果要对具有奇数项目的数组进行分组,则缩小数组中的最后一项将为[lastItemInSourceArray, undefined]。如有必要,您可以添加逻辑来处理该情况,具体取决于您实际需要执行的操作。在12个月的情况下,它显然不是问题。

答案 2 :(得分:0)

编辑,更新。保留原始数组。

尝试

V3

var ul = $("<ul>");
var month_array = ["January", "February", "March", "April"
                  , "May", "June", "July", "August"
                  , "September", "October", "November", "December"];

(function arr(m, n) {
    if (ul.children("li").size() < m.length / 2) {
        ul.append("<li>" 
                  + m.slice(n, n + 2).join(" & ") 
                  + "</li>");
                  n = n + 2;
        arr(m, n)
    } else {
        $("body").append(ul);
        console.log(month_array)
    }
}(month_array, 0));

jsfiddle http://jsfiddle.net/guest271314/orrje6qo/4/

答案 3 :(得分:0)

你正在寻找的答案.. !!

<body>
  <div class="listDiv">
    <ul></ul> 
  </div>
</body>



var month_array = [];
month_array[0] = "January";
month_array[1] = "February";
month_array[2] = "March";
month_array[3] = "April";
month_array[4] = "May";
month_array[5] = "June";
month_array[6] = "July";
month_array[7] = "August";
month_array[8] = "September";
month_array[9] = "October";
month_array[10] = "November";
month_array[11] = "December";
var array=[];
for(var i=1; i<month_array.length; ++i) {
  array[i] = '<li>' + month_array[i-1] + ' & ' +month_array[i] + '</li>';
}

$('.listDiv ul').append(array);

http://jsfiddle.net/raeegzrb/

也检查输出标记。