javascript - 如何翻转 Div 的内容

Question

我创建了一个“评论”列表，这些评论是使用 ajax 从字符串中提取的。问题是评论是按从头到尾的顺序排列的。我想从最后到第一个显示它们。下面的 div 是“JJ_Comments”div 中有评论时的样子。

    <div id="JJ_Comments">
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate"> Nov 11 2019  3:27PM: NAME HERE </div>
    <div class="JJ_CommentText"> Bulk upload project</div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate">Nov 19 2019  8:43AM: NAME HERE </div>
    <div class="JJ_CommentText"> RESOURCE CONSTRAINT</div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate">Nov 20 2019  9:01AM: NAME HERE </div>
                   <div class="JJ_CommentText"> RESOURCE CONSTRAINT</div>
                   </div>   
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate">Nov 20 2019  5:38PM: NAME HERE </div>
    <div class="JJ_CommentText"> ASBUILT DESIGN COMPLETE - QC COMPLETED</div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate">Nov 20 2019 10:05PM: NAME HERE </div>
    <div class="JJ_CommentText"> Stuff <div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate">Nov 21 2019  8:55AM: NAME HERE </div>
    <div class="JJ_CommentText"> RESOURCE CONSTRAINT</div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate">Nov 21 2019  8:58AM: NAME HERE </div>
    <div class="JJ_CommentText"> Job has been posted</div>
    </div>
    </div>

下面是我希望它也被“翻转”的内容。

    <div id="JJ_Comments">
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate">Nov 21 2019  8:58AM: NAME HERE </div>
    <div class="JJ_CommentText"> Job has been posted</div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate">Nov 21 2019  8:55AM: NAME HERE </div>
    <div class="JJ_CommentText"> RESOURCE CONSTRAINT</div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate">Nov 20 2019 10:05PM: NAME HERE </div>
    <div class="JJ_CommentText"> Stuff <div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate">Nov 20 2019  5:38PM: NAME HERE </div>
    <div class="JJ_CommentText"> ASBUILT DESIGN COMPLETE - QC COMPLETED</div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate">Nov 20 2019  9:01AM: NAME HERE </div>
                   <div class="JJ_CommentText"> RESOURCE CONSTRAINT</div>
                   </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate">Nov 19 2019  8:43AM: NAME HERE </div>
    <div class="JJ_CommentText"> RESOURCE CONSTRAINT</div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
    <div class="JJ_CommentDate"> Nov 11 2019  3:27PM: NAME HERE </div>
    <div class="JJ_CommentText"> Bulk upload project</div>
    </div>
    </div>

Answer 1

请更正您的 HTML，因为您缺少两个结束语 </div>底部并应用下面的解决方案。使用 CSS 可以很容易地做到这一点。看看下面的代码片段。

但是，如果您使用 AJAX 调用解析数据，您可能需要反转循环逻辑，获取所获取数据数量的最高值。

#JJ_Comments{
  display: flex;  
  flex-direction: column-reverse;
}

<div id="JJ_Comments">
    <div onclick="copyComment(this)" class="JJ_Comment">
        <div class="JJ_CommentDate"> Nov 11 2019 3:27PM: NAME HERE </div>
        <div class="JJ_CommentText"> Bulk upload project</div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
        <div class="JJ_CommentDate">Nov 19 2019 8:43AM: NAME HERE </div>
        <div class="JJ_CommentText"> RESOURCE CONSTRAINT</div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
        <div class="JJ_CommentDate">Nov 20 2019 9:01AM: NAME HERE </div>
        <div class="JJ_CommentText"> RESOURCE CONSTRAINT</div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
        <div class="JJ_CommentDate">Nov 20 2019 5:38PM: NAME HERE </div>
        <div class="JJ_CommentText"> ASBUILT DESIGN COMPLETE - QC COMPLETED</div>
    </div>
    <div onclick="copyComment(this)" class="JJ_Comment">
        <div class="JJ_CommentDate">Nov 20 2019 10:05PM: NAME HERE </div>
        <div class="JJ_CommentText"> Stuff
            <div onclick="copyComment(this)" class="JJ_Comment">
                <div class="JJ_CommentDate">Nov 21 2019 8:55AM: NAME HERE </div>
                <div class="JJ_CommentText"> RESOURCE CONSTRAINT</div>
            </div>
            <div onclick="copyComment(this)" class="JJ_Comment">
                <div class="JJ_CommentDate">Nov 21 2019 8:58AM: NAME HERE </div>
                <div class="JJ_CommentText"> Job has been posted</div>
            </div>
        </div>
  	</div>
</div>