PHP glob 在 foreach 循环中返回神秘的 html 元素

Question

好吧，不用过多介绍，我正在使用 glob 来 return 文件夹中的图像。在我执行 foreach 循环遍历文件内容并将它们添加到带有 li 元素的无序列表中之后，发生的事情是 foreach 是 returning 正确的图像并在其间添加一个空的 li 元素，破坏了ul.grid。

            <ul class="small-block-grid-1 medium-block-grid-4">
            <?php 
        $files = array();
        $files = glob('images/01/*.png'); // get all file names
        if(!empty($files)){
        natsort($files);
        $i = 0;
            foreach($files as $file){ // iterate files
              $i++;
              if(is_file($file))
                echo '<li class="floatiholder"> 
                      <span class="floati"> '.$i.' </span> 
                      <img src="'.$file.'" id="img'.$i.'"> 
                      <li>'; 
                }   
        }
        ?>
        </ul>

我使用的是 Zurb Foundation 5，所以类（small-block-grid-1 和 medium-block-grid-4），基本上只是对 ul 中的元素进行排序。

当我运行代码时，这是正在发生的事情：

我在从数据库读取之前生成了这样的 ul，我从来没有遇到过问题，但这是我第一次使用 glob，所以我怀疑它与它有关，我可以'查明它。

如果我能提供任何其他信息，请告诉我，我很乐意 post :)。

Answer 1

您没有结束 li 元素 </li>。相反，您打开了另一个 <li>，它在浏览器中呈现效果很差。

有时浏览器会尝试更正问题，但拥有正确的 HTML 是最安全的选择，不会让浏览器解释任何内容。

正确代码如下：

echo '<li class="floatiholder"> 
        <span class="floati"> '.$i.' </span> 
        <img src="'.$file.'" id="img'.$i.'"> 
      </li>';

PHP glob 在 foreach 循环中返回神秘的 html 元素

PHP glob is returning mysterious html element on foreach loop

php

html

zurb-foundation

zurb-foundation-5