如何創建嵌套李-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每個孩子及其相關子等等等等，這些元素應該有一個類的nested，然後讓我做這樣的事情：

  .nested .nested .nested .nested {/ * CSS規則在這裏爲4個級別的嵌套*的/}

基本上我應該能夠通過ul複製這種形式的嵌套的和li的

我有什麼？

我建立了一個反應成分混入該執行以下操作：

/** 
* 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> 

我需要改變我的遞歸函數來獲得這種類型的內容T' （注意：你可以假設父ul已經完成渲染的所有li的和他們的孩子和孫子等等等等都呈現最外層<ul></ul>內。）

Answer 1

只是生成樹遞歸地 - 不輸出到平面數組！

請考慮以下使用jQuery的原因，因爲它使DOM操作更容易。如果不使用jQuery，則使用其他DOM操作創建元素樹，因爲這樣會表示所需的輸出結構。 （因人而異;理論是聲音這種方法，但也可以包含bug作爲寫入。）

的comments參數是一個表示的評論的電流水平到過程（這是response.comments爲頂的陣列後代爲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）的孩子..然而，這是留給適應的。