在Javascript中使用递归函数根据父代和子代添加元素

Question

我收到了对subreddit中所有帖子的评论，并且需要在Reddit样式中显示它们。

这意味着每个评论都有其父母和子女。我尝试用以下结构来显示它们。

<div class="comment" id="comment.id" > <div class="body> comment.body </div> <div class="replies> Add one level lower comments </div> </div>

结构I的使用递归函数的一切，但我在页面上附加注释斗争。

这里是http://jsfiddle.net/DHKtW/572/

这是我想达到什么样的设计例子，但不是在正确的方式 - http://jsfiddle.net/DHKtW/573/取而代之的是，它应该只是插入<div class="replies> </div>

下的所有子评论

$.getJSON("http://www.reddit.com/r/science/comments/40h4go.json?", function(data) { 
 
    console.log(data[1].data.children); 
 
    checkComments(data[1].data.children,0); 
 
}); 
 

 

 
function checkComments(comments, deep) { 
 

 
    var replies = '<div class="replies"> </div>'; 
 
    
 
    for (comment in comments) { 
 
     console.log(comments[comment].data,deep); 
 
     
 
     element = comments[comment].data; 
 
     
 
     var body = '<div class="body"><p>' + element.body + '</p></div>' 
 

 
     var $comment = $('<div id="comment-'+element.name+'" class="comment"> 'body + replies +' </div>'); 
 
     
 
     child_comments = comments[comment].data.replies; 
 
     if (child_comments) { 
 
      checkComments(child_comments.data.children,deep+1); 
 
     } 
 
    } 
 
}

.replies { 
    margin-left: 20px; 
} 

Answer 1

如果我没有记错的w ^你正试图达到的目标。

我不得不重新命名一些变量，因为它误导了我。

$.getJSON("http://www.reddit.com/r/science/comments/40h4go.json?", function(data) { 
    addComments($('.comments'), data[1].data.children); 
}); 

function addComments(parentElem, comments) 
{ 
    for (comment in comments) 
    { 
     var commentData = comments[comment].data; 
     var bodyElem = '<div class="body"><p>' + commentData.body + '</p></div>'; 
     var $commentElem = $('<div id="comment-' + commentData.parent_id + '" class="comment" style="margin-left: 10px">' + bodyElem + '</div>'); 
     parentElem.append($commentElem); 

     if (commentData.replies) 
     { 
      var $replyElem = $('<div class="replies"> </div>'); 
      $commentElem.append($replyElem); 
      addComments($replyElem, commentData.replies.data.children); 
     } 
    } 
} 

这里的FIDDLE