ajax / codeigniter 输出每 4 列创建一个新行答案

【问题标题】：ajax / codeigniter out put create a new row every 4 columnsajax / codeigniter 输出每 4 列创建一个新行
【发布时间】：2017-04-07 12:20:57
【问题描述】：

在我的 ajax 的成功部分，每个结果都被放入列中。

我想要实现的是每 4 列将创建一个新行。

问题：关于 ajax 的成功部分，如何使其每 4 列之后创建一个新行？

<script type="text/javascript">
$("#select_category").on('keyup', function(e) {    
    $.ajax({
        type: "POST",
        url: "<?php echo base_url('questions/displaycategories');?>", 
        data: {
            category: $("#select_category").val()
        },
        dataType: "json",  
        success: function(json){
            list = '';

            list += '<div class="row">';

            $.each(json['categories'], function(key, value ) {
                list += '<div class="col-sm-3">';

                list += value['name'];

                list += '</div>';   
            });

            list += '</div>';

            $('.category-box').html(list);
        }
    });
});
</script>

【问题讨论】：

标签： javascript jquery codeigniter

【解决方案1】：

你可以只计算你添加了多少，每次达到 4 时插入一个新行：

$("#select_category").on('keyup', function(e) {
  $.ajax({
    type: "POST",
    url: "<?php echo base_url('questions/displaycategories');?>",
    data: {
      category: $("#select_category").val()
    },
    dataType: "json",
    success: function(json) {
      var list = '<div class="row">';
      var index = 0;

      $.each(json['categories'], function(key, value) {
        list += '<div class="col-sm-3">';
        list += value['name'];
        list += '</div>';
        index++;
        if(index === 4) {
          list += '</div><div class="row">';
          index = 0;
        }
      });

      list += '</div>';

      $('.category-box').html(list);
    }
  });
});

【讨论】：

【解决方案2】：

试试这个：

success: function(json){
    list = '';
    var cnt = 0;
    list += '<div class="row">';
    $.each(json['categories'], function(key, value ) {
        list += '<div class="col-sm-3">';
        list += value['name'];
        list += '</div>';
        cnt++;

        if(!cnt%4){
            list += '</div><div class="row">';
            cnt = 0;
        }
    });
    list += '</div>';
    $('.category-box').html(list);
}

【讨论】：