For循环-在第一个项目之后添加内容,然后每2个项目添加一个内容

时间:2018-06-28 19:13:39

标签: javascript for-loop

我正在创建一个for循环,以将一些数据附加到元素上。我想做的是在数组的第一项之后添加一个附加元素,然后每隔2个项目添加相同的附加元素:

$(function() {
  var arr = ['Red', 'Green', 'Blue', 'Yellow', 'Orange', 'Pink', 'Black'];
  
  for (var i = 0, len = arr.length; i < len; i++) {
    $('.container').append('<div>' + arr[i] + '</div>');
    
    // Place after first array value
    if (i === 0) {
      $('.container').append('<hr/>');
    }
    
    // Place after every two array values after first
    if(i != 0 && i % 2 === 0) {
      $('.container').append('<hr/>');
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

</div>

这可以按需工作,但是我想确保没有更简单/更干净/更有效的方式

1 个答案:

答案 0 :(得分:3)

您可以将支票移到for循环的开头并检查奇数。

$(function() {
    var arr = ['Red', 'Green', 'Blue', 'Yellow', 'Orange', 'Pink', 'Black'];
  
    for (var i = 0, len = arr.length; i < len; i++) {
        if (i % 2) {
            $('.container').append('<hr/>');
        }
        $('.container').append('<div>' + arr[i] + '</div>');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>