js遍历显示章节

最新推荐文章于 2025-05-28 17:21:59 发布

hehuijava

最新推荐文章于 2025-05-28 17:21:59 发布

阅读量546

点赞数

CC 4.0 BY-SA版权

文章标签： js遍历章节

本文链接：https://blog.youkuaiyun.com/hehuihh/article/details/82707069

当有类似于章节梯级这样的显示需求时，前端如何遍历章节数据呢？可能表结构不同，方式也不同，这里介绍一下章节在一张表中的遍历方式。

先看表结构：

前台发送请求（注意：章节查询必须排好序，确保得到的数据升序排列，即sql语句加order by），得到数据（包括了遍历章节的代码）：

<body>
	<div>
	</div>
	<script src="../content/js/jquery-1.8.3.js"></script>
	<script>
		$.ajax({
			url:"http://localhost:8000/studypaper//backend/guardianLesson/selectGuardianLesson",
			data:{lessionId:1},
			type:"get",
			success:function(result){
				var mark=0;//章的标记变量
				var chapter=new Array();//章的存储数组
				//得到所有的章
				$.each(result.data.guardianLessonDetailList,function(index,element){
					if(element.chapterNumber!=mark){
						chapter.push(element);
						mark=element.chapterNumber;
					}
				});
				//遍历章
				$.each(chapter,function(index,element){
					var chapterContent="";
					chapterContent+="<ul>第"+element.chapterNumber+"章:"+element.chapterTitle;
					//遍历章下的节
					$.each(result.data.guardianLessonDetailList,function(i,e){
						var section="";
						if(e.chapterNumber==element.chapterNumber){
							section+="<li>第"+e.chapterIndex+"节:"+e.detailContent+"</li>";
						}
						chapterContent+=section;
					});
					chapterContent+="</ul>";
					$("div").append(chapterContent);
				});
			}
		});	
	</script>
</body>

得到的数据：