【问题标题】:Laravel loop collection into small chunksLaravel 循环收集成小块
【发布时间】:2021-12-09 03:42:41
【问题描述】:

我想将以下十个标题循环成两列。然而,当我尝试这个 sn-p 时,它给了我第一个和最后一个标题。所以我想要的是将结果 10 分成两列中的五列。

@foreach ($allbulletin as $bullets)
    @if ($loop->first)
        {{$bullets->title}}
    @endif

    @if ($loop->last)
        {{$bullets->title}}
    @endif
@endforeach

【问题讨论】:

    标签: php laravel laravel-8


    【解决方案1】:

    使用这个简单的array_chunk() 方法:
    根据文档:array_chunk,它会根据给定的值自动制作数组块

    $input_array = array('a', 'b', 'c', 'd', 'e');
    print_r(array_chunk($input_array, 5, true));
    

    输出将是这样的:

    Array ( [0] => Array ( [0] => a [1] => b [2] => c [3] => d [4] => e ) )
    

    【讨论】:

      【解决方案2】:

      另一种可能的解决方案是避免在服务器端破坏结果以让浏览器执行此工作。

      这样您就可以简单地使用@foreach 语句遍历您的结果:

      @foreach ($allbulletin as $bullets)
        <div class="content">
              {{$bullets->title}}
        </div>
      @endforeach
      

      然后你可以使用 flex-box (CSS) 来显示它,如下面的 sn-p。

      .container {
        display: flex;  
        flex-wrap: wrap;
        width: 200px;
        background-color: lightgrey;
      }
      
      .content {
        width: 80px;
        margin: 10px;
        background-color: orange;
      }
      <div class="container">
        <div class="content">#1</div>
        <div class="content">#1</div>
        <div class="content">#1</div>
        <div class="content">#1</div>
        <div class="content">#1</div>
        <div class="content">#1</div>
        <div class="content">#1</div>
        <div class="content">#1</div>
        <div class="content">#1</div>
        <div class="content">#1</div>
      </div>

      【讨论】:

      • 很想使用这个 sn-p 但它仍然在一个列中,这就是我要解决的问题。
      【解决方案3】:

      你可以使用集合chunk方法

      <div class="row">
          @foreach ($allbulletin->chunk(5) as $chunk)
              <div class="col-md-6"
                  @foreach ($chunk as $bullet)
                      <p>{{ $bullet->title }}</p>
                  @endforeach
              </div>
          @endforeach
      </div>
      

      【讨论】:

        猜你喜欢
        • 2020-02-10
        • 1970-01-01
        • 2021-12-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-11-24
        相关资源
        最近更新 更多