PHP / HTML - 从数组生成 html 列表答案

【问题标题】：PHP / HTML - Generate a html list from a arrayPHP / HTML - 从数组生成 html 列表
【发布时间】：2011-04-21 13:14:06
【问题描述】：

我有一个像('mary', 'johnny', 'butch', 'pony', 'katy', 'chuck', 'norris') 这样的数组元素的数量可以变化...

我怎样才能从所有这些元素中构建一个漂亮的列表，如下所示：

<ul>
  <li>
    Mary
    Johnny
    Butch
  </li>

  <li>
    Pony
    Katy
  </li>

  <li>
    Chuck
    Norris
  </li>

基本上像螺旋一样构建列表：

> -------------
               |
<--------------
|
>--------------
               |
<--------------

列表项的数量是固定的，例如。 3 在上面的例子中

【问题讨论】：

这里遵循什么规则？脚本如何知道何时使用三个元素以及何时使用两个元素？
array_chunk 会给你 3-3-1 而不是 3-2-2，这可以接受吗？
pekka 我忘了提到有 3 个列表项。我想将数组元素均匀地分配给这 3 个<li>'s
但是如果数组中有超过 9 个元素怎么办？
哎呀，我的错误每个列表最多 3 个项目是错误的 - 我的意思是最多 3 个列表项目 :)

标签： php html arrays html-lists

【解决方案1】：

又一条路，因为没有发布足够奇怪的代码。

//set the amount of items
$li_items = 3;//can be anything, really

echo '<ul>';
//loop
for(;$li_items > 0;$li_items--){
   echo "\n\t<li>\n\t".implode("\n\t",
       array_splice($array,0,ceil(count($array)/$li_items))
      )."\n\t<li>";
}
echo '</ul>';

【讨论】：

大声笑，谢谢。但我会使用我找到的 partition() 函数:)
该功能确实确实具有清晰易读的优势；）

【解决方案2】：

您想将它们分成 3 组吗？比如：

<?php
$list = ('mary', 'johnny', 'butch', 'pony', 'katy', 'chuck', 'norris');
$c = 0;
$LIMIT = 3;
echo "<ul>";
foreach($list as $current) {
    echo "<li>$current</li>";
    $c += 1;
    if($c == $LIMIT) { echo "</ul><ul>"; }
}
echo "</ul>";

非常难看，但可以完成工作

【讨论】：

我认为 Alex 正在寻找一个会随着更多内容的添加而发生变化的脚本。因此，如果有 12 个，他希望 4 个一组，9 个一组 3 个，依此类推。当你有不可整除的数字时，问题就来了，这可能需要每个人都喜欢的 ceil 命令
正是 :) 上面的示例显示了一组 3 和两组 2。
这不是一个可取的 sn-p，因为： 1. 它引入了一个临时变量，该变量可能已经被 foreach 递增 2. $c === 3 只出现一次，但需要一遍又一遍地出现（每三次迭代）。

【解决方案3】：

你应该做的是将 presentation 与 logic 分开。与其计算每个元素应该包含多少项目，不如将每个项目放在它自己的元素中。毕竟每一个都是一个订单项。

<ul class="the_list">
    <li>Mary</li>
    <li>Johnny</li>
    <li>Butch</li>
    <li>Pony</li>
    <li>Katy</li>
    <li>Chuck</li>
    <li>Norris</li>
</ul>

然后使用 CSS 显示您想要的列表。例如，您可以这样做：

.the_list    { width:300px;}
.the_list li { display:block;float:left;width:100px;}

您首先需要一些额外的规则，例如重置样式表，但这就是要点。

【讨论】：

谢谢，但在我的情况下这是不可能的，因为我将其应用于图形滑块。列表项的数量是固定的，一次只显示 3 项。其余的将滑动...
你提到的这个图形滑块是什么？不能编辑吗？
实际上有 3 个这样的滑块应用于 3 个<li> 的每一个。这就是我需要将它们分开的原因。滑块是“循环”jquery 插件

【解决方案4】：

你可以遍历数组并使用模数

for ($i = 0; $i < count($array); $i++)
{
    if ($i % 3 == 0)
    {
        //append to first li
    }
    else if ($i % 3 == 1)
    {
        //append to second li
    }
    else
    {
        //append to third li
    }
}

【讨论】：