這個專案的最終想法是要從一個物件中創建章節和課程串列。
我已經成功地創建了獨特的標題ul元素，但是當我試圖將相關的li串列附加到每個ul時，我失去了我的邏輯。
這是我的代碼和demo jsfiddle。非常感謝您的幫助。
。var courselist = {
"items": [{
"chapterHeader": "Chapter 1",
"chapterNum": "1",
" lesson_id": 1,
"title": "Lesson 1",
}, {
"chapterHeader": "Chapter 1",
"chapterNum": "1",
" lesson_id": 2,
"title": "第2課"。
}, {
"chapterHeader": "Chapter 1",
"chapterNum": "1",
" lesson_id": 3,
"title": "Lesson 3",
}, {
"chapterHeader": "Chapter 2",
"chapterNum": "2",
" lesson_id": 4,
"title": "第4課"。
}, {
"chapterHeader": "Chapter 2",
"chapterNum": "2",
" lesson_id": 5,
"title": "第5課"。
}, {
"chapterHeader": "Chapter 3",
"chapterNum": "3",
" lesson_id": 6,
"title": "第6課"。
}, {
"chapterHeader": "Chapter 3",
"chapterNum": "3",
" lesson_id": 7,
"title": "第7課"。
}, ]
}
//
var course_obj = courselist.items,
chapters_arr = [],
tmp = {},
專案。
listChaps = "",
lesson_arr;
//獲取唯一的章節。
for (var i = 0; i < course_obj.length; i ) {
item = course_obj[i];
console.log（item）。
if (!tmp[item.chapterHeader]) { 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）。
}
}
//為各章節創建一個鏈接和uls。
for (var t = 0; t < chapters_arr.length; t ) {
listChaps = "<a href='#' class='chapter-header' data-toggle='dropdown'>"/span>
chapters_arr[t].chapter_name "</a><ul class='chapters_ul'></ul> "。
lesson_arr = chapters_arr[t].associated_lesson_arr;
console.log(classic_arr)。
}
$("#containner").html（listChaps）。
//為相關課程創建li串列。
for (i = 0; i < lesson_arr.length; i ) {
var li = document.createElement（'li'）。
li.innerHTML = lesson_arr[i];
$("#containner .chapters_ul").append（li）。
}.chapter-header {
color: #232525;
font-family: sans-serif;
font-size: 18px;
font-weight: 100;
letter-spacing: 0.5px;
text-transform: 大寫。
}
ul.chapters_ul {
list-style-type: none;
margin-bottom: 20px;
margin-top: 10px;
}
ul.chapters_ul li.ston-list {
字體大小。22px;
line-height: 1;
padding: 8px 4px 8px;
text-indent: 10px;
}
ul.chapters_ul li: before {
字體大小。18px;
vertical-align: middle;
}
ul.chapters_ul li: before {
內容。"2714"。
color: #73ff00;
display: inline-block;
padding-right: 10px;
}<script src="https://code. jquery.com/jquery-1.12.4.min.js"></script>
<div id=" containner"> </div> uj5u.com熱心網友回復：
對于像我這樣的新手來說，這是我對這個專案的拙劣解決方案。我想從堆疊的專家那里學習他們如何解決這樣的問題。 這里是作業的演示 jsfiddle
。var courselist = {
"LESSONS"/span>: [{
"chapterHeader": "Chapter 1",
"chapterNum": "1",
" lesson_id": 1,
"title": "Lesson 1",
}, {
"chapterHeader": "Chapter 1",
"chapterNum": "1",
" lesson_id": 2,
"title": "第2課"。
}, {
"chapterHeader": "Chapter 1",
"chapterNum": "1",
" lesson_id": 3,
"title": "Lesson 3",
}, {
"chapterHeader": "Chapter 2",
"chapterNum": "2",
" lesson_id": 4,
"title": "第4課"。
}, {
"chapterHeader": "Chapter 2",
"chapterNum": "2",
" lesson_id": 5,
"title": "第5課"。
}, {
"chapterHeader": "Chapter 3",
"chapterNum": "3",
" lesson_id": 6,
"title": "第6課"。
}, {
"chapterHeader": "Chapter 3",
"chapterNum": "3",
" lesson_id": 7,
"title": "第7課"。
}, ]
}
//
//
var course_obj = courselist.LESSONS,
chapters_arr = [],
tmp = {},
eachLesson,
listChaps = ""/span>,
lesson_arr;
//獲得獨特的章節。
for (var i = 0; i < course_obj.length; i ) {
eachLesson = course_obj[i];
// console.log(eachLesson);
if (!tmp[eachLesson.chapterHeader] ) {
tmp[eachLesson.chapterHeader] = {
chapter_name: eachLesson.chapterHeader,
associated_lesson_arr: []
};
chapters_arr.push(tmp[eachLesson.chapterHeader] )。
}
if (eachLesson.title != null) {
tmp[eachLesson.chapterHeader].associated_lesson_arr.push（eachLesson.title）。
// console.log(tmp[eachLesson.chapterHeader].associated_lesson_arr)。
}
}
// console.log(chapters_arr); }
for (j = 0; j < chapters_arr.length; j ) {
listChaps = "<a href='#' class='chapter-header' data-toggle='dropdown'>"/span>
chapters_arr[j].chapter_name "</a><ul class='chapters_ul'></ul> ";
$('#container').html（listChaps）。
}
// console.log(theTitle);
for (l = 0; l < chapters_arr.length; l ) {
lesson_arr = chapters_arr[l].associated_lesson_arr;
for (x = 0; x < lesson_arr.length; x ) {
var theTitle = lesson_arr[x];
// console.log(theTitle);
var ul = $(".chapters_ul"/span>)。
newli = document.createElement（'li'）。
newli.append（theTitle）。
//
//現在$(".chapters_ul")的長度等于。
//chapters_arr.length，所以所有的章節都可以得到它們的。
//assocciated lesson and can be appended to their ul.
ul[l].append（newli）。
}
} .chapter-header {
color: #232525;
font-family: sans-serif;
font-size: 18px;
font-weight: 100;
letter-spacing: 0.5px;
text-transform: 大寫。
}
ul.chapters_ul {
list-style-type: none;
margin-bottom: 20px;
margin-top: 10px;
}
ul.chapters_ul li {
font-size: 22px;
line-height: 1;
padding: 8px 4px 8px;
text-indent: 10px;
cursor: 指標。
}
ul.chapters_ul li: before {
字體大小。18px;
vertical-align: middle;
}
ul.chapters_ul li: before {
內容。"2714"。
color: #73ff00;
display: inline-block;
padding-right: 10px;
}<script src="https://code. jquery.com/jquery-1.12.4.min.js"></script>
<div id="container"/span>> </div> 轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/313043.html
標籤：
上一篇：深度復制一個包含指標的物件
下一篇：重新審核網格布局的動態高度