如何遍历 JS 数组以连续创建偶数列

Question

我不知道该怎么做。我正在使用类似于带有 col-3,4,6 等的引导网格的东西...... 我有一个带有图片的 JS 数组，我需要将它们放在一行的 col-4 中。行有自己的样式，所以这是必要的。 我怎样才能遍历一个数组来输出这样的东西：

array = [
  item1, item2, item3, item4, item5, item6, item7, item8
]

array.map(function(item){
  //puts code here
});

returns
<div class="row">
  <div class="col4">
    item1
  </div>
  <div class="col4">
    item2
  </div>
  <div class="col4">
    item3
  </div>
</div>
<div class="row">
  <div class="col4">
    item4
  </div>
  <div class="col4">
    item5
  </div>
  <div class="col4">
    item6
  </div>
</div>
<div class="row">
  <div class="col4">
    item7
  </div>
  <div class="col4">
    item8
  </div>
</div>

顺便说一句，我正在使用反应组件。

Answer 1

http://jsfiddle.net/vnLp2sfs/3/

function grid( array, colc, rowstyle, colstyle ) {

    var result = "";

    array.forEach(function(item, index, self){
      var i = index % colc; // Column index

      if (i===0) result += '<div class="'+rowstyle+'">'; // Open row

      result += '<div class="'+colstyle+'">' + item + '</div>';

      if (i===(colc-1) || index === self.length-1 ) result += '</div>'; // Close row    
    });

    return result;
}

Answer 2

我会做这样的事情（假设我们在一个 React 组件中并且没有使用 ES6）：

getDefaultProps: function(){
    return {
      cellsPerRow: 3,  
      myArray: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8']
    };
},

renderRow: function(cells){
    return (
        <div className="row">
            {cells.map(function(item) {
                return <div className="col4">{item}</div>;
            })}
        </div>
    );
},

render: function(){
    var array = this.props.myArray.slice();
    var output = [];
    var cellsInRow;

    while (array.length) {
        cellsInRow = array.splice(0,this.props.cellsPerRow);   
        output.push(
            this.renderRow(cellsInRow)
        );
    }

    return <div>{output}</div>;
},

利用拼接的工作方式，因为它破坏了主题数组并返回拼接的索引。

Answer 3

$(document).ready(function(){
var array = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8'];

for (var i=0; i<array.length; i++) {
  $('.col4:eq('+i+')').html(array[i]);
  
  }
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col4">

  </div>
  <div class="col4">

  </div>
  <div class="col4">

  </div>
</div>
<div class="row">
  <div class="col4">

  </div>
  <div class="col4">

  </div>
  <div class="col4">

  </div>
</div>
<div class="row">
  <div class="col4">

  </div>
  <div class="col4">

  </div>

Answer 4

假设有两个错别字：

1. V 不是东西
2. 使用col-md-4 代替col4

以下内容将获取您的数组 (array)，使用 .map() 将列类包装在每个项目周围，将数组分块为最多 3 个项目的集合，然后通过遍历分块数组和将每个集合包装在一个行类中。

var array = [
  'item1', 'item2', 'item3', 'item4'
];

array = array.map(function (item) {
  return '  <div class="col-md-4">' + item + '</div>\n';
});

array = [].concat.apply([], array.map(function(elem,i) {
  return i % 3 ? [] : [array.slice(i, i + 3)];
}));

var html = ''

array.forEach(function (set) {
  html += '<div class="row">\n';
  html += set.join('');
  html += '</div>\n';
});

console.write(html);

输出（html 变量）：

<div class="row">
  <div class="col-md-4">item1</div>
  <div class="col-md-4">item2</div>
  <div class="col-md-4">item3</div>
</div>
<div class="row">
  <div class="col-md-4">item4</div>
</div>