如何关联数组中的父级分类与子级分类并生成嵌套层级的HTML结构？

我来帮你搞定这个父子分类关联的问题！要实现你想要的HTML结构，核心是先把扁平的数组转换成父子关联的树形结构，这样后续渲染分类层级就清晰多了。下面一步步来操作：

第一步：将扁平数组转换为树形结构 #

首先我们需要把原来的扁平分类数组，整理成父级分类包含对应子级分类数组的结构，这样后续渲染时可以轻松嵌套遍历：

// 1. 先把所有分类按groupId建立索引，方便快速查找父分类
$groupIndex = [];
foreach ($getGroup['Groups'] as $group) {
    $group['children'] = []; // 初始化子分类存储数组
    $groupIndex[$group['groupId']] = $group;
}

// 2. 遍历每个分类，将其挂载到对应的父分类的children数组中
foreach ($getGroup['Groups'] as $group) {
    // 检查当前分类是否有父分类，且父分类存在于索引中
    if (isset($group['parentGroupId']) && isset($groupIndex[$group['parentGroupId']])) {
        $groupIndex[$group['parentGroupId']]['children'][] = $group;
    }
}

// 3. 筛选出所有顶级父分类（没有父分类ID的分类）
$parentGroups = array_filter($groupIndex, function($group) {
    return !isset($group['parentGroupId']) || empty($group['parentGroupId']);
});

第二步：编写渲染函数生成目标HTML #

接下来我们写一个嵌套渲染的函数，完全匹配你需要的HTML结构，同时处理子分类的层级展示：

/**
 * 渲染单个分类及其子分类的HTML
 * @param array $group 单个分类数据
 * @return string 生成的HTML字符串
 */
function renderGroup($group) {
    // 转义分类名称，防止XSS攻击和HTML结构破坏
    $groupName = htmlspecialchars($group['groupName']);
    $html = '<div class="parentCategory">';
    $html .= "<p>{$groupName}</p>";
    
    // 如果当前分类有子分类，渲染子分类容器
    if (!empty($group['children'])) {
        $html .= '<div class="childCategory">';
        foreach ($group['children'] as $child) {
            $childName = htmlspecialchars($child['groupName']);
            // 判断子分类是否有下一级子分类，添加对应的class
            $hasChildClass = !empty($child['children']) ? 'class="hasChilds"' : '';
            $html .= "<a {$hasChildClass} href=\"#\">{$childName}</a>";
            
            // 如果子分类还有下一级，渲染孙子分类容器
            if (!empty($child['children'])) {
                $html .= '<div class="childrenCategory">';
                foreach ($child['children'] as $grandChild) {
                    $grandChildName = htmlspecialchars($grandChild['groupName']);
                    $html .= "<p>{$grandChildName}</p>";
                }
                $html .= '</div>';
            }
        }
        $html .= '</div>';
    }
    
    $html .= '</div>';
    return $html;
}

// 遍历所有顶级父分类，输出最终HTML
foreach ($parentGroups as $parentGroup) {
    echo renderGroup($parentGroup);
}

几个关键细节说明 #

• 数组树形转换：这一步是核心，把原本扁平的数组变成层级结构，避免了多次循环查找父分类的低效操作。
• XSS防护：使用htmlspecialchars()转义分类名称，确保分类名称中的特殊字符（比如<、>、引号）不会破坏HTML结构或者带来安全风险。
• 动态class判断：通过子分类数组是否为空来判断是否添加hasChilds类，比依赖原数组的hasChilds字段更可靠（避免字段值不准确的情况）。
• 扩展性：这个方案支持多层级分类，哪怕后续增加更多层级的子分类，代码也不需要大幅修改。

内容的提问来源于stack exchange，提问作者Tvarinsky