用循环在多维数组中追加内部对象

Question

我有一个多维数组的评论对象，我想出了如何循环通过第一级对象然后追加它们，但我有一个真正的很难弄清楚如何将回复与有回复的评论一起提交。我的策略是使用一个“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); 
    }; 

Answer 1

肯定这里有什么jQuery的.closest作为一个参数的一些误解，也有与currentComment有些好奇的作用域的错误。但是，要解决的主要问题是，如果replies是每个评论对象的属性，那么您需要处理每个评论项的回复 - 也就是说，处理回复的代码应该由processComments函数以某种方式处理。

就这样说，我会向你提出我认为对你的问题更好的解决方案。因为您正在尝试从评论数组中呈现HTML，所以我认为更简洁更优雅的解决方案就是使用JavaScript模板。我将使用.template方法从Underscore.js库：

<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 }));