Laravel loop - 在重复容器中定位项目

Question

我对每个事件都有一个 foreach 循环。我刚刚意识到主包装器和其中的 3 个项目都是同一个事件。

第一个、第二个和第三个事件应该在一个包装器中。关。然后应该打开 4、5、6 的新主包装器，依此类推..

我对解决方案的初步想法：

我想也许可以使用：

@if ($loop->first)

将 'first' 放在主要位置。 ->'second' secondary 在哪里等。但由于这是一个循环，我无法静态地解释第 1、第 2、第 3 以及最多数百个。

当前代码

@foreach( $events['events'] as $event )

  <!-- Product Grid -->
  <div class="flex-grid">
    <div class="flex__direction--column">
      <div class="flex__direction--row">

        <!-- 1ST ITEM -->
        <div class="item item--primary">

          <div class="a-card a-card--secondary a-card--event-template {{ $block }}__card">
            <div class="a-card__media-wrapper">
              <div class="a-card__box-content">
                <div class="a-card__date-wrapper">
                  <span class="a-card__meta a-card__date">{{ $date['0'] }}</span>
                  <span class="a-card__meta a-card__date">{{ $date['1'] }}</span>
                  <span class="a-card__meta a-card__date">{{ $date['2'] }}</span>
                </div>
              </div>
              <img class="a-card__media--image" src="http://wp3-dev.fatsomasites.com/app/uploads/sites/396/2018/04/1920x1080.jpg">
              <div class="a-card__heading-wrapper">
                <a class="a-card__media-link" href="#">
                  <h2 class="a-card__heading">
                    {{ $event['title'] }}
                  </h2>
                </a>
              </div>
            </div>
          </div>

        </div>

        <div class="item flex__direction--column">
          <div class="item">
            <!-- 2ND ITEM -->
            <div class="flex__direction--row">
              <div class="item item--secondary">

                <div class="a-card a-card--secondary a-card--event-template {{ $block }}__card">
                  <div class="a-card__media-wrapper">
                    <div class="a-card__box-content">
                      <div class="a-card__date-wrapper">
                        <span class="a-card__meta a-card__date">{{ $date['0'] }}</span>
                        <span class="a-card__meta a-card__date">{{ $date['1'] }}</span>
                        <span class="a-card__meta a-card__date">{{ $date['2'] }}</span>
                      </div>
                    </div>
                    <img class="a-card__media--image" src="http://wp3-dev.fatsomasites.com/app/uploads/sites/396/2018/04/1920x1080.jpg">
                    <div class="a-card__heading-wrapper">
                      <a class="a-card__media-link" href="#">
                        <h2 class="a-card__heading">
                          {{ $event['title'] }}
                        </h2>
                      </a>
                    </div>
                  </div>
                </div>

              </div>
            </div>
            <!-- 3RD ITEM -->
            <div class="flex__direction--row">
              <div class="item item--tertiary">

                <div class="a-card a-card--secondary a-card--event-template {{ $block }}__card">
                  <div class="a-card__media-wrapper">
                    <div class="a-card__box-content">
                      <div class="a-card__date-wrapper">
                        <span class="a-card__meta a-card__date">{{ $date['0'] }}</span>
                        <span class="a-card__meta a-card__date">{{ $date['1'] }}</span>
                        <span class="a-card__meta a-card__date">{{ $date['2'] }}</span>
                      </div>
                    </div>
                    <img class="a-card__media--image" src="http://wp3-dev.fatsomasites.com/app/uploads/sites/396/2018/04/1920x1080.jpg">
                    <div class="a-card__heading-wrapper">
                      <a class="a-card__media-link" href="#">
                        <h2 class="a-card__heading">
                          {{ $event['title'] }}
                        </h2>
                      </a>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

@endforeach

这是当前输出。

我想要达到的目标：

Answer 1

代码复制粘贴有点快:) 你来排序

var $counter = 0;
foreach ($sorce_array as $event) {
$counter++;
if (($counter % 3) == 1)  { 

<div class="flex-grid">
    <div class="flex__direction--column">
      <div class="flex__direction--row">
<div class="item item--primary">

          <div class="a-card a-card--secondary a-card--event-template {{ $block }}__card">
            <div class="a-card__media-wrapper">
              <div class="a-card__box-content">
                <div class="a-card__date-wrapper">
                  <span class="a-card__meta a-card__date">{{ $date['0'] }}</span>
                  <span class="a-card__meta a-card__date">{{ $date['1'] }}</span>
                  <span class="a-card__meta a-card__date">{{ $date['2'] }}</span>
                </div>
              </div>
              <img class="a-card__media--image" src="http://wp3-dev.fatsomasites.com/app/uploads/sites/396/2018/04/1920x1080.jpg">
              <div class="a-card__heading-wrapper">
                <a class="a-card__media-link" href="#">
                  <h2 class="a-card__heading">
                    {{ $event['title'] }}
                  </h2>
                </a>
              </div>
            </div>
          </div>

        </div>
} 

If ((($counter % 3) ==2)) {
<div class="item flex__direction--column">
          <div class="item">
}

If (($counter % 3) != 1)  { 
<div class="flex__direction--row">
              <div class="item item--secondary">

                <div class="a-card a-card--secondary a-card--event-template {{ $block }}__card">
                  <div class="a-card__media-wrapper">
                    <div class="a-card__box-content">
                      <div class="a-card__date-wrapper">
                        <span class="a-card__meta a-card__date">{{ $date['0'] }}</span>
                        <span class="a-card__meta a-card__date">{{ $date['1'] }}</span>
                        <span class="a-card__meta a-card__date">{{ $date['2'] }}</span>
                      </div>
                    </div>
                    <img class="a-card__media--image" src="http://wp3-dev.fatsomasites.com/app/uploads/sites/396/2018/04/1920x1080.jpg">
                    <div class="a-card__heading-wrapper">
                      <a class="a-card__media-link" href="#">
                        <h2 class="a-card__heading">
                          {{ $event['title'] }}
                        </h2>
                      </a>
                    </div>
                  </div>
                </div>

              </div>
            </div>
    }

If (($counter % 3) == 0)  { 
</div>
</div>
</div>
</div>
</div>
}
}

Laravel loop - 在重复容器中定位项目

Laravel loop - position items in repeated container

php

laravel

blade