Question

通常，当我遍历数据库表记录时，我将它们放在1 div中，但是，我一直在想是否可以创建3 div，然后在每个div中放置一条记录，然后从第一个div开始然后冲洗并重复。

到目前为止我如何做的例子：

<div class="container">
    @foreach($albumImages as $albumImage)
    <div class="centeredImage stickyContainer" style="background-image: url('/storage/uploads/albums/{{$albumName}}/{{$albumImage->file_name}}')">
        <a class='specialA' href=''></a>
    </div>
    @endforeach
</div>

在这种情况下，您会看到，所有记录都在容器div中。

我一直在思考的示例：

<div class="flex-grid">
    <div class="col-l"></div>
    <div class="col-c"></div>
    <div class="col-r"></div>
</div>

第一条记录进入col-l，第二条记录进入col-c，第三条记录进入col-r，然后再次从col-l开始。

Answer 1

尝试一下

<div class="flex-grid">
@php($count = 0)
@foreach($albumImages as $albumImage)
    @if ($count % 3 == 0)
        <div class="col-l"></div>
    @elseif($count % 3 == 1)
        <div class="col-c"></div>
    @else
        <div class="col-r"></div>
    @endif
    @php($count++)
@endforeach
</div>

您可以使用此代码，但稍后我将通过更佳的解决方案来更新我的答案

@php($count = 0)
@foreach($albumImages as $albumImage)
    @if ($count % 3 == 0)
        @php($albumImages1[] = $albumImage)
    @elseif($count % 3 == 1)
        @php($albumImages2[] = $albumImage)
    @else
        @php($albumImages3[] = $albumImage)
    @endif
    @php($count++)
@endforeach

@if (!empty($albumImages1))
    @foreach($albumImages1 as $albumImage)
    // your logic here
    @endforeach
@endif

@if (!empty($albumImages2))
    @foreach($albumImages2 as $albumImage)
    // your logic here
    @endforeach
@endif

@if (!empty($albumImages3))
    @foreach($albumImages3 as $albumImage)
    // your logic here
    @endforeach
@endif

此外，您可以将初始数组分成三部分，以创建全局帮助函数。

定义全局函数

function split_sequence_by_count ($array, $count) {
    $result = [];

    for ($i = 0; $i < $count; $i++) {
        $result[$i] = [];
    }

    $_count = 0;

    foreach ($array as $current) {
        $index = $_count % 3;
        $result[$index][] = $current;
        $_count++;
    }

    return $result;
}

刀片中的用途

@php(list ($albumImages1, $albumImages2, $albumImages3) = split_sequence_by_count($albumImages, 3))

@foreach($albumImages1 as $albumImage)
    // your logic here
@endforeach

@foreach($albumImages2 as $albumImage)
    // your logic here
@endforeach

@foreach($albumImages3 as $albumImage)
    // your logic here
@endforeach

Answer 2

另一种方法是array_chunk，然后仅使用2个嵌套循环遍历数组。应该是不言自明的。

Answer 3

<?php

$people =
[
    'John',
    'Paul',
    'Ringo',
    'George'
];

$i=0;
$classes = ['col-a','col-b','col-c'];
foreach($people as $name) {
    $class = $classes[$i++%3];
    ?>
    <div class='<?=$class?>'>
        <?=$name?>
    </div>
    <?php
}

格式化输出：

<div class='col-a'>
John    
</div>
<div class='col-b'>
Paul    
</div>
<div class='col-c'>
Ringo    
</div>
<div class='col-a'>
George    
</div>

关于将每个名称放在每列中（根据您的评论），我们可以纠缠数组格式：

$classes = ['col-a','col-b','col-c'];
$i=0;
foreach($people as $name)
    $columns[$classes[$i++%3]][] = $name;
?>
<?php foreach($columns as $class=>$column) { ?>
    <div class='<?=$class?>'>
        <?php foreach($column as $name) { ?>
            <div class="name">
                <?=$name?>
            </div>
        <?php } ?>
    </div>
<?php } ?>

格式化输出：

<div class='col-a'>
   <div class="name">
      John            
   </div>
   <div class="name">
      George            
   </div>
</div>
<div class='col-b'>
   <div class="name">
      Paul            
   </div>
</div>
<div class='col-c'>
   <div class="name">
      Ringo            
   </div>
</div>

是否可以有3个div元素并使循环按顺序填充它们？

3 个答案: