javascript - ajax/codeigniter 输出每 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);
    }
  });
});