js遍歷顯示章節
阿新 • • 發佈：2018-12-09
當有類似於章節梯級這樣的顯示需求時，前端如何遍歷章節資料呢？可能表結構不同，方式也不同，這裡介紹一下章節在一張表中的遍歷方式。
先看錶結構：
前臺傳送請求，得到資料（包括了遍歷章節的程式碼）：
<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>
得到的資料：
js遍歷章節思路：1，建立一個數組，遍歷所有的章節，取出所有的章，存放在陣列中；1，遍歷存放章的陣列，並且在本次迴圈中再次遍歷所有章節，取出章下面的所有的節。（詳細寫法：見上面程式碼）
顯示效果如下：
