Как разбить массив на группы по 3, а затем по-разному стилизовать все остальные строки?

Если у меня есть массив, как это:

$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>';
}

Просто не знаю, как получить все остальные строки в дополнение к этому.

0

Решение

Используя ваш 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

0

Другие решения

Вы можете избежать написания внутреннего цикла, используя implode(), Вам не нужно назначать «четные» и «нечетные» классы, если вы используете правильные объявления CSS.

Код: (демонстрация)

$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, вам нужно только использовать nth-child() логика в вашем css.

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>
0

По вопросам рекламы [email protected]