如何将一个数组分成 3 组，然后每隔一行设置不同的样式？

Question

如果我有这样的数组：

$food = array('steak', 'chicken', 'vegetables', etc);

我如何遍历数组并显示 3 个列表中的每一项，并且每隔一行设置不同的样式？

喜欢：

Steak chicken vegetables 
Stuff stuff stuff // style this one differently
Blah blah blah
Stuff stuff stuff // style differently

我知道我能做到：

foreach (array_chunk($food, 3, true) as $array) {
    echo '<ul>';
    foreach ($array as $item) {
        echo '<li>'.$item.'</li>';
    }
    echo '</ul>';
}

只是不确定如何获取除此之外的每一行内容。

Answer 1

使用 foreach() 循环，将 key 添加到 as key => value。然后你可以使用模 % 修改每隔一行。

foreach (array_chunk($food, 3, true) as $key => $array) {
    $oddeven = ($key%2 == 1) ? ' class="even"' : '';
    echo '<ul'.$oddeven.'>';
    foreach ($array as $item) {
        echo '<li>'.$item.'</li>';
    }
    echo '</ul>';
}

示例 - https://3v4l.org/LdSgJ

Answer 2

您可以使用 implode() 避免编写内部循环。如果您使用正确的 css 声明，则不需要分配 "even" 和 "odd" 类。

代码：(Demo)

$food = ['steak', 'chicken', 'vegetables', 'stuff'];
foreach (array_chunk($food, 3) as $batch) {
    echo "<ul><li>" , implode("</li><li>", $batch) , "</li></ul>";
}

输出：

<ul>
    <li>steak</li>
    <li>chicken</li>
    <li>vegetables</li>
</ul>
<ul>
    <li>stuff</li>
</ul>

整理好 html 后，您只需在 css.

中使用 nth-child() 逻辑

li:nth-child(odd) {
    color: orange;
}
li:nth-child(even) {
    color: green;
}

<ul>
 <li>steak</li>
 <li>chicken</li>
 <li>vegetables</li>
</ul>
<ul>
 <li>stuff</li>
</ul>

如何将一个数组分成 3 组，然后每隔一行设置不同的样式？

How to split an array into groups of 3 and then style every other row differently?

php

arrays

styling

listitem