如何用JQuery获取层级关联的分类与课程信息（不可改HTML）

问题 #

现有如下HTML结构（无法修改页面结构）：

<div id="filtro_informacoes">
 <div class="categoria_filtro"> <b>Category 1</b> </div>
 <div class="curso_filtro"> <b>Course 1</b> </div>
 <div class="curso_filtro"> <b>Course 2</b> </div>
 <div class="categoria_filtro"> <b>Category 2</b> </div>
 <div class="curso_filtro"> <b>Course 3</b> </div>
 <div class="curso_filtro"> <b>Course 4</b> </div>
 <div class="curso_filtro"> <b>Course 5</b> </div>
 <div class="curso_filtro"> <b>Course 6</b> </div>
</div>

其中Category 1是Course 1、Course 2的父级，Category 2是Course 3至Course 6的父级。我尝试用jQuery的each方法编写了如下代码：

var filterObject = $("#filtro_informacoes");
$.each( filterObject, function( key ) {
 var cat_text = $(this).children('.categoria_filtro').text();
 console.log( key + ": " + cat_text );
 var filtro_curso = $(this).children('.curso_filtro').text();
 console.log( key + ": " + filtro_curso );
});

得到的输出是：

Category 1
Category 2
Course 1
Course 2
Course 3
Course 4
Course 5
Course 6

但我需要的输出格式为：

Category 1
Category 1 - Course 1
Category 1 - Course 2
Category 2
Category 2 - Course 3
Category 2 - Course 4
Category 2 - Course 5
Category 2 - Course 6

仅能修改JavaScript/jQuery代码，请问该如何实现？

解决方案 #

问题出在你当前的代码是直接批量获取所有分类和所有课程，没有把它们的父子关联关系对应起来。我们可以换个思路：遍历容器下的每一个子元素，跟踪当前的分类名称，遇到分类元素时更新当前分类并输出，遇到课程元素时结合当前分类输出即可。

修改后的代码如下：

// 遍历容器下的每一个直接子元素
$("#filtro_informacoes > div").each(function() {
    // 用变量跟踪当前活跃的分类
    let currentCategory;
    if ($(this).hasClass('categoria_filtro')) {
        // 提取分类文本并去除多余空格
        currentCategory = $(this).text().trim();
        // 输出分类本身
        console.log(currentCategory);
    } else if ($(this).hasClass('curso_filtro') && currentCategory) {
        // 提取课程文本并去除多余空格
        const courseText = $(this).text().trim();
        // 拼接分类和课程名称后输出
        console.log(`${currentCategory} - ${courseText}`);
    }
});

思路说明： #

1. 不再遍历容器本身，而是直接遍历#filtro_informacoes下的每一个直接子元素，这样能按顺序处理分类和课程
2. 用currentCategory变量实时记录当前遇到的分类，确保后续课程能关联到正确的父分类
3. 使用.trim()方法去除文本中的多余空格，避免输出出现不必要的空白字符
4. 通过判断元素的类名，分别处理分类和课程的输出逻辑，完美匹配你需要的格式

这样就能得到你想要的关联式输出了。

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