javascript - 如何为“嵌套”注释部分创建正确格式化 DOM 的函数

Question

我正在开发一个包含嵌套注释的模块。从我的ajax请求返回的数据的格式大致如下：

  items: Array[3]
      0: Object
         Children: Array[3]
         0: Object
            Children: Array[2]
       1: Object
         Children: Array[3]
         0: Object
            Children: Array[2]

我编写了一个递归函数来查找所有父子注释，并将列表附加到页面上的另一个元素：

    function findChildren( root ) {

      if( root.length >= 1 ) {

         $.each( root, function( key, parent ) {

              units.comments.push( '<div id="root-comment-' + parent.id + '">' + parent.comment  + '</div>' );

              if( parent.children.length >=1 ) {

                $.each( parent.children, function( key, child ) {

                    units.comments.push( '<div id="child-comment-' + child.id + '">' + child.comment  + '</div>' );

                    if( child.children.length >= 1 && child.children != null ) {

                        findChildren( child.children );

                      }

                  });

               } 

            });
     }

   } findChildren( parents );

问题在于 它findChildren附加了一个平面元素列表。编辑我知道我正在关闭<div id="root-comment">.

   <div id="parent-comment"><p>Some Comment</p></div>
   <div id="child-comment"><p>Some Comment</p></div>

我想要的是一个嵌套的元素列表

   <div id="parent-comment"><p>Some Comment</p>
       <div id="child-comment"><p>Some Comment</p></div>
   </div>

任何帮助，将不胜感激。

Answer 1

<div>在处理嵌套部分时打开然后关闭它的这种事情怎么样：

 function findChildren( root ) {
      if( root.length >= 1 ) {
         $.each( root, function( key, parent ) {
              units.comments.push( '<div id="root-comment-' + parent.id + '">' + parent.comment );
              if( parent.children.length >=1 ) {
                $.each( parent.children, function( key, child ) {
                    units.comments.push( '<div id="child-comment-' + child.id + '">' + child.comment );
                    if( child.children.length >= 1 && child.children != null ) {
                        findChildren( child.children );
                      }
                    units.comments.push( '</div>' );
                  });
               } 
            units.comments.push( '</div>' );
            });
     }
   } findChildren( parents );