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

试试这个：

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

Answer 2

您可以计算您添加的数量，并在每次达到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);
    }
  });
});

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

2 个答案: