Question

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

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

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

我想也许可以使用：

@if ($loop->first)

将“第一个”置于主要位置。 - ＆gt;'second'，其中secondary是等等。但由于这是一个循环，我不能静态地考虑第一，第二，第三和最多数百。

当前代码

@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循环 - 在重复容器中定位物品

1 个答案: