我有一个评论对象的多维数组,我想出了如何循环遍历第一级对象然后追加它们,但我很难弄清楚如何将回复与有回复的评论。我的策略是使用" if"检查是否有回复的声明,然后循环回复,就像我做的评论,但我认为最接近的()函数是问题,我不太确定如何访问与该注释对应的DOM元素,将其用作选择器。我想也许另一种策略是用一个.each循环同时处理回复。任何帮助将不胜感激!
var myCommentArray = [
{
_id: "888888888888888888",
index: 1,
name: "Perez",
message: "First Comment .......",
subject: "enim officias",
replies: [ // notice this comment has replies (just 1 but it is still an array)
{
_id: "77777777777777777777",
index: 0,
name: "Reply to First Comment Ines for Perez",
message: "...",
subject: "reply subject consequat"
}
]
},
{
_id: "999999999999",
index: 0,
name: "Shelton",
message: "2nd Comment....a",
subject: "enim irure",
replies: null // notice this comment has no replies and as such is null. this is better than an empty array
},
{
_id: "666666666666666666",
index: 2,
name: "Perez",
message: "3rd Comment.......",
subject: "enim officias",
replies: [
{
_id: "55555555555555555555",
index: 0,
name: "1st Reply to 3rd Comment",
message: "...",
subject: "reply subject consequat"
},
{
_id: "44444444444444444444",
index: 1,
name: "2nd Reply to 3rd Comment",
message: "...",
subject: "reply subject consequat"
}
]
}
];
sabio.page.processComments = function (i, currentComment) {
var commentsFormat = '<br> <div class="comment-avatar media-left"> <img src="http://placehold.it/50x50" alt="avatar">' +
'</div><div class="comment-content media-body clearfix"> <div class="comment-avatar media-left"></div><h3 class="media-heading">' +
currentComment.subject + '</h3> <div class="comment-meta">By ' + currentComment.name + '</div> <div class="comment-body"> <p>'
+ currentComment.message + '</p><a href="#" class="replyButton">' +
'<i class="fa fa-reply"> </i> Reply </a> </div> </div>';
$('.comments').append(commentsFormat);
};
$.each(myCommentArray, sabio.page.processComments);
sabio.page.processReplies = function (j, currentComment) {
var repliesFormat = '<br> <div class="comment-avatar media-left"> <img src="http://placehold.it/50x50" alt="avatar">' +
'</div><div class="comment-content media-body clearfix"> <div class="comment-avatar media-left"></div><h3 class="media-heading">' + currentComment.subject + '</h3> <div class="comment-meta">By ' + currentComment.name + '</div> <div class="comment-body"> <p>' + currentComment.message + '</p><a href="#" class="btn btn-gray more reply">' +
'<i class="fa fa-reply"> </i> Reply </a> </div> </div>';
var closestComment= $(currentComment).closest();
$(closestComment).append(repliesFormat);
});
if (myCommentArray.replies) {
$.each(myCommentArray.replies, sabio.page.processReplies);
};
答案 0 :(得分:0)
这里肯定存在一些误解,即jQuery&#39; .closest
作为一个参数,currentComment
存在一些奇怪的范围错误。但是,要解决的主要问题是,如果replies
是每个注释对象的属性,那么您将需要处理每个注释项的回复 - 也就是说,处理回复的代码应该以某种方式处理processComments
功能。
话虽如此,我会向您提出我认为对您的问题更好的解决方案。因为您正在尝试从注释数组中呈现HTML,所以我认为更清洁和优雅的解决方案是使用JavaScript模板。我将使用Underscore.js库中的.template方法:
<script id="CommentsTemplate" type="text/template">
<div>
<% _.each(comments, function (comment) { %>
<div class="comment-avatar media-left">
<img src="http://placehold.it/50x50" alt="avatar" />
</div>
<div class="comment-content media-body clearfix">
<div class="comment-avatar media-left"></div>
<h3 class="media-heading"><%- comment.subject %></h3>
<div class="comment-meta">By <%- comment.name %></div>
<div class="comment-body">
<p><%- comment.message %></p>
<a href="#" class="replyButton"><i class="fa fa-reply"> </i> Reply</a>
</div>
</div>
<div>
<% _.each(comment.replies, function (reply) { %>
<div class="comment-avatar media-left">
<img src="http://placehold.it/50x50" alt="avatar" />
</div>
<div class="comment-content media-body clearfix">
<div class="comment-avatar media-left"></div>
<h3 class="media-heading"><%- reply.subject %></h3>
<div class="comment-meta">By <%- reply.name %></div>
<div class="comment-body">
<p><%- reply.message %></p>
<a href="#" class="btn btn-gray more reply"><i class="fa fa-reply"> </i> Reply</a>
</div>
</div>
<% }); %>
</div>
<% }); %>
</div>
</script>
使用我们的模板,我们的渲染可以简化为一些非常简单的代码:
var template = _.template($('#CommentsTemplate').html());
$('.comments').html(template({ comments: comments }));