Javascript 如何创建一个函数来正确格式化'；嵌套'；评论部分

我正在开发一个包含嵌套注释的模块。从我的

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 );

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

   <div id="parent-comment"><p>Some Comment</p>
       <div id="child-comment"><p>Some Comment</p></div>
   </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 );

函数findChildren（根）{
如果（根长度>=1）{
$.each（根、函数（键、父级）{
单位.comments.push（“”+parent.comment）；
如果（parent.children.length>=1）{
$.each（parent.children，function（key，child）{
单位.comments.push（“”+child.comment）；
if（child.children.length>=1&&child.children！=null）{
findChildren（child.children）；
}
单位。注释。推送（“”）；
});
} 
单位。注释。推送（“”）；
});
}
}子女（父母）；

类似的东西会让这更容易。好吧，在执行递归部分之前关闭div，你会有什么期望？@Ryan，谢谢你的链接，我将看一下Knockout-为此，我尝试使用jQuery/Javascriptproject@DaveNewton，我知道。这就是问题所在。

 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 );