从对象生成章节与课程UL列表的逻辑问题求助

我明白你遇到的问题了——你已经成功提取了唯一的章节，但最后把课程列表追加到对应章节的ul时，要么只显示最后一个章节的课程，要么所有章节的ul都重复了相同的内容。这是因为你在最后一步循环时，只拿到了最后一个章节的课程数组，而且把所有li都追加到了所有的.chapters_ul元素里。

下面是修正后的完整代码，我会一步步解释改动点：

修正后的HTML（无需改动） #

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="container"></div>

CSS（保留原有样式，确保类名匹配） #

.chapter-header {
 color: #232525;
 font-family: sans-serif;
 font-size: 18px;
 font-weight: 100;
 letter-spacing: 0.5px;
 text-transform: uppercase;
}
ul.chapters_ul {
 list-style-type: none;
 margin-bottom: 20px;
 margin-top: 10px;
}
ul.chapters_ul li.lesson-list {
 font-size: 22px;
 line-height: 1;
 padding: 8px 4px 8px;
 text-indent: 10px;
}
ul.chapters_ul li:before {
 font-size: 18px;
 vertical-align: middle;
}
ul.chapters_ul li:before {
 content: "\\2714";
 color: #73ff00;
 display: inline-block;
 padding-right: 10px;
}

修正后的JavaScript #

var courselist = { 
  "items": [
    { "chapterHeader": "Chapter 1", "chapterNum": "1", "lesson_id": 1, "title": "Lesson 1" }, 
    { "chapterHeader": "Chapter 1", "chapterNum": "1", "lesson_id": 2, "title": "Lesson 2" }, 
    { "chapterHeader": "Chapter 1", "chapterNum": "1", "lesson_id": 3, "title": "Lesson 3" }, 
    { "chapterHeader": "Chapter 2", "chapterNum": "2", "lesson_id": 4, "title": "Lesson 4" }, 
    { "chapterHeader": "Chapter 2", "chapterNum": "2", "lesson_id": 5, "title": "Lesson 5" }, 
    { "chapterHeader": "Chapter 3", "chapterNum": "3", "lesson_id": 6, "title": "lesson 6" }, 
    { "chapterHeader": "Chapter 3", "chapterNum": "3", "lesson_id": 7, "title": "lesson 7" }
  ] 
};

// 1. 定义变量，提取课程数据
var course_obj = courselist.items, 
    chapters_arr = [], 
    tmp = {}, 
    item, 
    listChaps = "";

// 2. 提取唯一章节并关联对应课程（这部分逻辑没问题，保留）
for (var i = 0; i < course_obj.length; i++) {
  item = course_obj[i];
  if (!tmp[item.chapterHeader]) {
    tmp[item.chapterHeader] = { 
      chapter_name: item.chapterHeader, 
      associated_lesson_arr: [] 
    };
    chapters_arr.push(tmp[item.chapterHeader]);
  }
  if (item.title != null) {
    tmp[item.chapterHeader].associated_lesson_arr.push(item.title);
  }
}

// 3. 渲染章节和对应的课程列表（关键改动）
for (var t = 0; t < chapters_arr.length; t++) {
  // 拼接章节标题
  listChaps += "<a href='#' class='chapter-header' data-toggle='dropdown'>" + chapters_arr[t].chapter_name + "</a>";
  // 开始拼接当前章节的ul容器
  listChaps += "<ul class='chapters_ul'>";
  
  // 遍历当前章节的课程，直接把li拼接进对应的ul
  var lessons = chapters_arr[t].associated_lesson_arr;
  for (var k = 0; k < lessons.length; k++) {
    listChaps += "<li class='lesson-list'>" + lessons[k] + "</li>";
  }
  
  // 闭合当前章节的ul
  listChaps += "</ul>";
}

// 4. 把完整的HTML插入页面容器
$("#container").html(listChaps);

关键改动说明： #

1. 修复未定义变量：重新启用了你注释掉的var course_obj = courselist.items;，确保能正确遍历课程数据。
2. 合并渲染逻辑：原来的代码是先渲染所有空ul再单独加li，导致无法对应到具体章节。现在我们在渲染每个章节时，直接把该章节的所有课程li拼接进对应的ul里，一次性生成完整的HTML结构。
3. 避免重复追加：不再单独循环添加li，而是在拼接章节HTML时完成课程列表的生成，这样每个章节的ul只会包含自己的课程，不会出现所有ul内容重复的问题。
4. 匹配CSS类名：给li加上了lesson-list类，确保你的CSS样式能正确应用到课程列表项。

这样修改后，每个章节的课程列表就会正确关联到对应的章节，不会出现逻辑混乱的情况了。

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