php - php循环用div和自定义类包装每4个结果
问题描述
我正在尝试根据每个包装块的结果数添加一些自定义类。
- 在每个包装块的最后一个添加类
last
。 - 计算每个包装块的结果,并根据结果添加自定义类,
one-half
one-third
one-fourth
这是代码:
<?php
$array = range(1, 11);
$i= 0;
foreach ($array as $val) {
if ($i%4 == 0) echo '<div class="item">';
$i++;
?>
<span class="one-fourth"><?=$val?></span>
<?php
if ($i%4 == 0) echo '</div>';
}
if ($i%4 != 0) echo '</div>';
?>
我得到的输出:
<div class="item">
<span class="one-fourth">1</span>
<span class="one-fourth">2</span>
<span class="one-fourth">3</span>
<span class="one-fourth">4</span>
</div>
<div class="item">
<span class="one-fourth">5</span>
<span class="one-fourth">6</span>
<span class="one-fourth">7</span>
<span class="one-fourth">8</span>
</div>
<div class="item">
<span class="one-fourth">9</span>
<span class="one-fourth">10</span>
<span class="one-fourth">11</span>
</div>
我想要的输出:
<div class="item">
<span class="one-fourth">1</span>
<span class="one-fourth">2</span>
<span class="one-fourth">3</span>
<span class="one-fourth last">4</span>
</div>
<div class="item">
<span class="one-fourth">5</span>
<span class="one-fourth">6</span>
<span class="one-fourth">7</span>
<span class="one-fourth last">8</span>
</div>
<div class="item">
<span class="one-third">9</span>
<span class="one-third">10</span>
<span class="one-third last">11</span>
</div>
解决方案
这可能最容易通过将数组拆分为块并在循环中单独处理每个块,使用count
块的 来决定将哪个类添加到跨度:
$array = range(1, 11);
$chunks = array_chunk($array, 4);
$span_classes = ['', 'one-half', 'one-third', 'one-fourth'];
foreach ($chunks as $chunk) {
echo "<div class=\"item\">\n";
$count = count($chunk);
$span_class = $span_classes[$count-1];
for ($i = 0; $i < $count; $i++) {
$last = $i == $count - 1 ? ' last' : '';
$val = $chunk[$i];
echo "<span class=\"$span_class$last\">$val</span>\n";
}
echo "</div>\n";
}
输出:
<div class="item">
<span class="one-fourth">1</span>
<span class="one-fourth">2</span>
<span class="one-fourth">3</span>
<span class="one-fourth last">4</span>
</div>
<div class="item">
<span class="one-fourth">5</span>
<span class="one-fourth">6</span>
<span class="one-fourth">7</span>
<span class="one-fourth last">8</span>
</div>
<div class="item">
<span class="one-third">9</span>
<span class="one-third">10</span>
<span class="one-third last">11</span>
</div>
推荐阅读
- linux - 如何使 PAM 密码身份验证正常工作?
- javascript - 在 JS 中使用 Date 对象检查年龄
- javascript - Javascript TypeError:未定义不是对象
- java - 在不使用数组的情况下在 Java 中对句子进行排序
- reactjs - 在antd中以动态形式获取字段值
- json - 如何使用 jq 使用 BASH 变量中的键解析 JSON?
- javascript - 我可以在 Dart 上运行所有 JavaScript 功能吗?
- javascript - 自动提交,一旦选择选项
- c - 用字符数计算单词
- mysql - 错误 1136 列计数与值计数不匹配