如何在UL中迭代使用appendChild和片段LI？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在UL中迭代使用appendChild和片段LI？相关的知识，希望对你有一定的参考价值。
我正在尝试在列表中建立列表。虽然我可以成功地建立父列表，但不能成功地注入子数组的迭代。
我有一组对象。这些对象中可能包含对象数组。例如：
[
{ class: 'math', students: [ student objs ] }
,{ class: 'science', students: [ student objs ] }
]
我想迭代地建立一个班级列表，并在班级内创建学生。
var data = [
// { id:'math', students: [ { id:'math student a' }, { id:'math student b'} ] },
{ id:'sciences', students: [ { id:'sci student c' }, { id:'sci student d', award: [ { id: "award a" }, { id: "award b"} ] }
] } ];
function fillElement( arr, dom ) {
var outerEl = document.createDocumentFragment();
dom.appendChild(document.createElement('ul'));
arr.forEach(function ( obj,idx ) {
var li = document.createElement('li');
var ul = document.createElement('ul');
li.textContent = obj.id;
outerEl.appendChild( li );
dom.querySelector('ul:first-of-type').appendChild( outerEl );
for (var prop in obj) {
if( Array.isArray( obj[prop] ) ){
dom = dom.querySelector('li:last-of-type').appendChild(document.createElement('ul'));
fillElement( obj[prop], dom );
}
}
});
};
var dom = document.querySelector("#dom");
fillElement( data,dom );
如何合并两个片段以获得嵌入式dom
<ul>
<li>math</li>
<li>
<ul>
<li>student a</li>
<li>student b</li>
</ul>
</li>
</ul>
目前我的html就是这样
<div id="dom"><ul>
<li>sciences<ul>
<ul>
<li>sci student c</li>
<li>sci student d<ul>
<ul>
<li>award a</li>
<li>award b</li>
</ul>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
</div>
答案
您在这里：
HTML
<body>
<ul></ul>
</body>
// Gets the ul tag in the body tag in which we will add our li tags.
var ul = document.querySelector('body > ul');
var classes = [
{ class: 'math', students: ['student a', 'student b'] },
{ class: 'science', students: ['student c', 'student d'] }
];
function fillUlElement(ulElement, classes) {
// First we iterate over all the classes.
// We can't use class as variable name since that is a reserved keyword
// in javascript, so we are using classInfo as a variable name instead.
classes.forEach(function (classInfo) {
// We create a li tag that we will add to the ul tag at the end
// of this function.
var li = document.createElement('li');
// We set the name of the class as text in our li tag first.
// Be aware that textContent clears all the content in the li tag.
// So we need to set the name of the class before we add our
// list of students.
li.textContent = classInfo.class;
// Create the ul tag which will contain the li tags of students.
var studentsUlElement = document.createElement('ul');
classInfo.students.forEach(function (student) {
var studentElement = document.createElement('li');
studentElement.textContent = student;
// Add the li tag with the student name to the ul tag of students.
studentsUlElement.appendChild(studentElement);
});
// Add our ul tag which contains a list of li tags/student names.
li.appendChild(studentsUlElement);
// And at last add the li tag, which contains the name of the
// class and the ul tag with students, to the main ul tag
ulElement.appendChild(li)
});
};
// Passing the ul tag and the classes array into this function so we can
// do this with other ul tags and arrays with the same format as well.
fillUlElement(ul, classes);
以上是关于如何在UL中迭代使用appendChild和片段LI？的主要内容，如果未能解决你的问题，请参考以下文章