仿网易评论盖楼 JS 实现 | html

<div class="comments">
        <div></div>
        <div class="coms_head">评论列表</div>
        <div class="coms_body" id="commentArea"></div>
</div>
<script>
var data = [
    {id:1,parent_id:0,content:'第一个'},
    {id:2,parent_id:0,content:'第二个'},
    {id:3,parent_id:1,content:'回复 第一个'},
    {id:4,parent_id:1,content:'回复 第一个'},
    {id:5,parent_id:3,content:'回复 回复 第一个'},
    {id:6,parent_id:5,content:'回复 回复 回复 第一个'},
    {id:7,parent_id:1,content:'回复 第一个'},
    {id:8,parent_id:2,content:'回复 第二个'},
];

function commentTree(commentList){
    var comment_str = "<div class='comment' >";
    commentList.forEach(function(row) {
        var temps = "<div class='content'>"+row.content+"</div>";
        comment_str += temps;
        console.log(row.children);
        if (row.children && row.children.length>0){
            comment_str +=commentTree(row.children);
        }
    });
    comment_str += "</div>";
    return comment_str;
}

function toTree(data) {
    data.forEach(function(item) {
        delete item.children;
    });
    var map = {};
    data.forEach(function(item) {
        map[item.id] = item;
    });
    var val = [];
    data.forEach(function(item) {
        var parent = map[item.parent_id];
        if (parent) {
            (parent.children || (parent.children = [])).push(item);
        } else {
            val.push(item);
        }
    });
    return commentTree(val);
}

var comment = toTree(data);
document.getElementById('commentArea').innerHTML=comment;
</script>