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>

要构建我使用此递归函数的所有内容，但我很难在页面上附加注释。

这是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

如果我没有弄错你想要实现的目标。

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

$.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

在Javascript

1 个答案: