本文详细介绍了如何使用 PHP 在服务器端动态生成 HTML 结构，将具有相同首字母或数字开头的元素（如产品列表项）进行分组，并用一个统一的 div 容器包裹起来。通过追踪前一个元素的标题首字母，我们可以在适当的时机开启和关闭分组容器，从而实现结构清晰、易于维护的 HTML 输出，避免了复杂的客户端 JavaScript 操作。

原始问题与挑战

在构建动态网页内容时，我们经常需要根据某些条件对列表项进行分组。例如，在一个产品列表中，我们可能希望将所有以字母“C”开头的产品归为一组，以“D”开头的产品归为另一组，并用一个额外的 div 容器将这些同组的产品包裹起来。

最初的 PHP 代码可能如下所示，它会为每个具有不同首字母的组生成一个 h3 标题，然后紧跟着输出该组的 div.item 元素。

<?php foreach ($forlop as $value) : ?>
    <?php
        $stringTitle = substr($value->getTitle(), 0, 1);
    ?>
    <?php if(is_numeric($stringTitle)){
        echo "<h3 id='other'>0-9</h3>";
    } else{
        echo "<h3 id=".strtolower($stringTitle).">".strtoupper($stringTitle)."</h3>";
    }?>
    <div class="item"><?php echo $value->getId(); ?></div>
<?php endforeach; ?>

这段代码的输出示例如下：

<h3 id="c">C</h3>
<div class="item">1</div>
<div class="item">2</div>
<h3 id="d">D</h3>
<div class="item">3</div>
<div class="item">4</div>
<h3 id="e">E</h3>
<div class="item">5</div>

然而，我们期望的输出结构是每个 h3 标题后面跟着一个 div.items-add 容器，该容器包裹着所有属于该组的 div.item 元素，例如：

立即进入“豆包AI人工智官网入口”；

立即学习“豆包AI人工智能在线问答入口”；

<h3 id="c">C</h3>
<div class="items-add">
    <div class="item">1</div>
    <div class="item">2</div>
</div>
<h3 id="d">D</h3>
<div class="items-add">
    <div class="item">3</div>
    <div class="item">4</div>
</div>
<h3 id="e">E</h3>
<div class="items-add">
    <div class="item">5</div>
</div>

这种结构要求我们在 PHP 循环中智能地判断何时开启新的分组容器，以及何时关闭前一个分组容器。

豆包爱学

豆包旗下AI学习应用

26

查看详情

PHP 服务器端解决方案

实现这种分组逻辑的关键在于引入一个变量来追踪当前分组的标识（例如，标题的首字母），并在每次迭代时将其与当前元素的标识进行比较。当标识发生变化时，意味着一个新的分组开始了，此时我们需要关闭前一个分组的容器（如果存在），然后开启新的 h3 标题和新的分组容器。

以下是优化的 PHP 代码实现：

<?php
$oldTitleInitial = ""; // 用于存储前一个元素的标题首字母或数字标识
?>
<?php foreach ($forlop as $value) : ?>
    <?php
        // 获取当前元素的标题首字母
        $currentTitleInitial = substr($value->getTitle(), 0, 1);
        // 将首字母转换为小写，以便作为ID使用，并进行统一比较
        $normalizedInitial = is_numeric($currentTitleInitial) ? '0-9' : strtolower($currentTitleInitial);
    ?>

    <?php
    // 如果当前元素的标题首字母与前一个不同，则表示开始一个新的分组
    if ($normalizedInitial !== $oldTitleInitial) :
        // 如果这不是第一个分组，需要关闭前一个 'items-add' 容器
        if ($oldTitleInitial !== "") :
            echo "</div>"; // 关闭前一个 <div class='items-add'>
        endif;

        // 输出新的 h3 标题
        if(is_numeric($currentTitleInitial)){
            echo "<h3 id='other'>0-9</h3>";
        } else{
            echo "<h3 id='{$normalizedInitial}'>".strtoupper($currentTitleInitial)."</h3>";
        }

        // 开启新的 'items-add' 容器
        echo "<div class='items-add'>";

        // 更新 $oldTitleInitial 为当前分组的标识
        $oldTitleInitial = $normalizedInitial;
    endif;
    ?>

    <!-- 输出当前分组内的 item 元素 -->
    <div class="item"><?php echo $value->getId(); ?></div>
<?php endforeach; ?>

<?php
// 循环结束后，如果存在未关闭的 'items-add' 容器，则需要将其关闭
if ($oldTitleInitial !== "") :
    echo "</div>";
endif;
?>

代码解析：

1. $oldTitleInitial = “”;: 初始化一个变量，用于存储上一个处理过的分组的标识。在循环开始前，它为空字符串，表示还没有任何分组。
2. $currentTitleInitial = substr($value-youjiankuohaophpcngetTitle(), 0, 1);: 从当前元素的标题中提取第一个字符。
3. $normalizedInitial = is_numeric($currentTitleInitial) ? ‘0-9’ : strtolower($currentTitleInitial);: 对提取的首字符进行标准化处理。如果是数字，则统一标识为 ‘0-9’；否则转换为小写字母。这样做是为了确保比较的准确性，并与 h3 的 id 属性保持一致。
4. if ($normalizedInitial !== $oldTitleInitial): 这是核心逻辑。当当前元素的标准化首字母与上一个不同时，说明一个新的分组开始了。
   • if ($oldTitleInitial !== “”): 如果 $oldTitleInitial 不为空，说明之前已经开启了一个 div.items-add 容器，现在需要将其关闭。
   • 输出 h3 标题: 根据 $currentTitleInitial 是否为数字，输出相应的 h3 标签。
   • echo “<div class=’items-add’>”;: 开启新的分组容器。
   • $oldTitleInitial = $normalizedInitial;: 更新 $oldTitleInitial，以便在下一次循环中进行比较。
5. <div class=”item”><?php echo $value->getId(); ?></div>: 输出当前元素的 div.item 标签，它将自动被包裹在最近开启的 div.items-add 容器内。
6. 循环后的清理 (if ($oldTitleInitial !== “”)): 在 foreach 循环结束后，最后一个 div.items-add 容器可能还没有被关闭。因此，需要在循环外部添加一个检查，确保所有已开启的容器都被正确关闭。

注意事项

• 数据预处理: 确保 $forlop 数据源是按照标题首字母排序的。如果数据是无序的，此分组逻辑将无法正确工作，因为相同首字母的元素可能不会连续出现。通常，在从数据库查询数据时，可以通过 ORDER BY title ASC 来实现排序。
• ID 的唯一性: h3 标签的 id 属性在整个文档中应该是唯一的。在上述解决方案中，我们使用小写字母或 ‘other’ 作为 id，这通常能保证唯一性，但仍需确保标题首字母不会产生冲突的 id。
• 服务器端渲染优势: 这种在 PHP 中直接生成分组结构的方案是服务器端渲染（SSR）的典型应用。它在页面加载时就提供了完整的、结构化的 HTML，对 SEO 友好，且用户无需等待 JavaScript 执行即可看到完整内容，提升了首次内容绘制（FCP）性能。
• 客户端方案对比: 虽然也可以使用 jQuery 等客户端 JavaScript 库在页面加载后对 DOM 进行操作来达到同样的效果（如使用 wrapAll() 或 nextUntil()），但服务器端解决方案通常更高效，尤其是在数据量较大时，可以减少客户端的计算负担和潜在的页面闪烁（FOUC）。客户端方案适用于无法修改服务器端代码，或需要更灵活的动态交互场景。

总结

通过在 PHP 循环中引入一个状态变量来追踪当前分组的标识，我们可以有效地在服务器端动态生成复杂的分组 HTML 结构。这种方法不仅保证了输出的正确性和清晰度，也充分利用了服务器端渲染的优势，为用户提供了更好的体验。遵循上述教程中的逻辑和注意事项，您将能够灵活地处理各种元素分组需求。

以上就是使用 PHP 动态分组并包裹相同初始字符的元素的详细内容，更多请关注php中文网其它相关文章！

https://www.php.cn/faq/1561926.html