javascript - 从对象/数组创建 UL 列表
问题描述
这个项目的最终想法是从一个对象创建章节和课程列表。
我已经设法创建了唯一的标题ul
元素,但是当我尝试将关联的li
列表附加到每个列表时,ul
我失去了我的逻辑。
这是我的代码和演示 jsfiddle。非常感谢您的帮助。
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",
}, ]
}
//
var course_obj = courselist.items,
chapters_arr = [],
tmp = {},
item,
listChaps = "",
lesson_arr;
// Getting unique chapters
for (var i = 0; i < course_obj.length; i++) {
item = course_obj[i];
console.log(item);
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);
}
}
// Create a links and uls for chapters
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 class='chapters_ul'></ul>";
lesson_arr = chapters_arr[t].associated_lesson_arr;
console.log(lesson_arr);
}
$("#containner").html(listChaps);
// Create li lists for associated lessons
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: 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;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="containner"></div>
解决方案
对于像我这样的新手来说,这是我对这个项目的谦虚解决方案。我想向堆栈的专家学习他们将如何解决这样的问题。这是工作演示 jsfiddle
var courselist = {
"LESSONS": [{
"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",
}, ]
}
//
//
var course_obj = courselist.LESSONS,
chapters_arr = [],
tmp = {},
eachLesson,
listChaps = "",
lesson_arr;
// Getting unique chapters
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'>" +
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");
newli = document.createElement('li');
newli.append(theTitle);
//
//now length of $(".chapters_ul") is equal to
// chapters_arr.length so all chapters can get their
//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: uppercase;
}
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: pointer;
}
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;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="container"></div>
推荐阅读
- javascript - 加载一次 json 并在函数外使用内容文件
- python - 必需的位置参数:'self'
- button - 在godot中单击按钮时如何生成一个窗口?
- bash - shell / bash 中的 `<( )` 语法是什么,如何搜索它?
- visual-studio-code - Visual Studio Code 滚动键入光标
- python - Python:根据用户输入创建具有两部分递增名称的新文件
- python - 如何使用python删除公式并仅在单元格中保留值
- spring-boot - 带有 Spring Boot 集成问题的 OpenApi/Swagger
- ads - 为什么我的 Google 广告会在我排除的国家/地区展示?
- c++ - C++ | 用同一类绘制不同的敌人?有继承