Ajax / codeigniter out put 每 4 列创建一个新行

Question

在我的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>

Answer 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);
    }
  });
});

Answer 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);
}