如何在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>

javascript

// 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?的主要内容,如果未能解决你的问题,请参考以下文章

如何迭代嵌套数组?

偶然发现有意思的现象

如何在Django视图中使用for循环返回每次迭代[关闭]

appendchild有没有回调函数

HTML DOM appendChild() 方法

带有节点 appendChild() html 的动画