javascript - 如何创建嵌套的 li-ul-li 元素

Question

我希望获取以下 json:

{
   "comments":[
      {
         "id":3,
         "comment":"asdasdasdasdsadsaasd",
         "author":"Adam",
         "post_id":126,
         "ancestry":null,
         "created_at":"2014-06-18T00:25:04.421Z",
         "updated_at":"2014-06-18T00:25:04.421Z",
         "children":[
            {
               "id":4,
               "comment":"asdasdasdasdsadsaasd",
               "author":"Adam",
               "post_id":126,
               "ancestry":"3",
               "created_at":"2014-06-18T00:25:57.913Z",
               "updated_at":"2014-06-18T00:25:57.913Z",
               "children":[
                  {
                     "id":7,
                     "comment":"asdasdasdasdsadsaasd",
                     "author":"Adam",
                     "post_id":126,
                     "ancestry":"3/4",
                     "created_at":"2014-06-18T00:57:36.277Z",
                     "updated_at":"2014-06-18T00:57:36.277Z",
                     "children":[

                     ]
                  },
                  {
                     "id":5,
                     "comment":"asdasdasdasdsadsaasd",
                     "author":"Adam",
                     "post_id":126,
                     "ancestry":"3/4",
                     "created_at":"2014-06-18T00:26:12.017Z",
                     "updated_at":"2014-06-18T00:26:12.017Z",
                     "children":[

                     ]
                  }
               ]
            }
         ]
      }
   ]
}

如您所见，它可以嵌套更多的子项或注释，并编写一个做两件事的递归函数:

• 遍历每个评论博客以寻找 children ，从那里遍历那些 - 重复直到他的死胡同(该函数应该是递归的 - 请参阅下面到目前为止的内容)

• 对于 children 中的每个 child 及其关联的 child 等等，元素应该有一个类 nested然后允许我做类似的事情:

  .nested .nested .nested .nested {/* 此处的 css 规则用于 4 层嵌套 */>

基本上我应该能够通过 ul 复制这种嵌套形式的和li的

我有什么？

我构建了一个 React 组件混合器，它执行以下操作:

/**
 * Helps with abstracting certian logic from the comments component.
 */
var CommentsMixins = {

  commentElements: [],

  /**
   * Recursive fucntion to help get all nested comments.
   *
   * Keeps the order of the nested comments And renders a react component
   * which is a single comment.
   */
  renderComments: function(comments) {
    for (var key in comments) {
      if (key === 'children' && key.length !== 0) {
        var nestedComments = comments[key]
        for (var i = 0; i < nestedComments.length; i++) {
          this.commentElements.push('<li id="comment-'+nestedComments[i].id+'" class="indented"> <h1>'+nestedComments[i].author+' <small>said ... </small></h1>  <p>'+nestedComments[i].comment+'</p></li>');
          this.renderComments(nestedComments[i]);
        }
      }
  },

  getCommentElements: function() {
    return this.commentElements;
  }

}

这又会吐出:

<ul>
  <li> ... </li> <!-- id: 3 -->
  <li> ... </li> <!-- id: 4 -->
  <li> ... </li> <!-- id: 7 -->
  <li> ... </li> <!-- id: 5 -->
  ...
</ul>

什么时候应该是这样的:

<ul>
 <li> <!-- id: 3 -->
   <ul>
     <li> ... </li> <!-- id: 4 -->
   </ul>
 </li>
 ...
<ul>

为了获得那种类型的布局，我必须在递归函数中更改什么？ (注意:您可以假设父级 ul 已经完成渲染。所有 li 及其子级和孙级等等都在最外层的 <ul></ul> 中渲染。 )

Answer 1

只需递归地构建树 - 不要输出到平面数组!

考虑以下使用 jQuery 的代码，因为它使 DOM 操作更容易。如果不使用 jQuery，则使用其他 DOM 操作创建一个元素树，这样将表示所需的输出结构。 (YMMV；这种方法的理论是合理的，但它可能包含所写的错误。)

comments 参数是一个数组，表示要处理的评论的当前级别(这是 response.comments 用于顶级- level 和 comment.children 用于后代)。与原来的方法不同，函数内部只有 一个 循环，因为它使用递归遍历 JSON 树 并将其转换为 DOM 树，一次一个级别/一个分支。

buildComments: function(comments) {
   // Return undefined if there are no comments to process;
   // alternatively, it /may/ be appropriate to return an empty UL.
   if (!comments || !comments.length) {
       return;
   }

   // Create the container UL for the comments in this level.
   var list = $('<ul>');
   for (var i = 0; i < comments.length; i++) { // Don't use for..in for arrays
       var comment = comments[i];

       // Create an LI for each comment and add it to the container
       var item = $('<li>')
           .attr('id', "comment-" + comment.id);
       // Add the LI to the UL parent
       list.append(item);
       // Add appropriate content to the item LI
       item.append($('<h1>').text(comment.author));
       item.append($('<p>').text(comment.comment));

       // And then do the same for each child level of comments..
       var childrenList = this.buildComments(comment.children);
       if (childrenList) {
           // ..adding children (UL) container to the current item (LI)
           item.append(childrenList);
       }
   }
   // Return container to be used by caller
   return list;
},

然后像这样使用它

var commentList = helper.buildComments(result.comments)
if (commentList) {
    $('#commentLocation').append(commentList);
}

如果顶级 UL 已经存在，则可能需要简单地附加结果 (UL) 元素的直接 (LI) 子元素。但是，这将作为适应性保留。