如何翻转Div的内容

时间：2019-11-21 21:38:30

标签： javascript html

我创建了一个使用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>

3 个答案:

答案 0 :(得分：3)

请更正您的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>

答案 1 :(得分：1)

这就是我想出的。

  1. 选择所有评论
  2. 将此列表转换为数组
  3. 反转阵列方向
  4. 将元素添加到评论容器的顶部

选择所有评论 

document.getElementsByClassName('JJ_Comment')

将此列表转换为数组 

Array.from(document.getElementsByClassName('JJ_Comment'))+

反转阵列方向 

Array.from(document.getElementsByClassName('JJ_Comment')).reverse();

将元素添加到评论容器的顶部 

commentSection.appendChild(element);

请注意，您的HTML仍然无效，在div的末尾有两个未关闭的HTML。

我的解决方案将获取每个JJ_Comment元素，并且不依赖外部HTML容器的结构是否有效或可靠。我认为，如果不确定外部HTML容器是否将完全有效HTML，这可能是最好的解决方案。

var comments = Array.from(document.getElementsByClassName('JJ_Comment')).reverse();
var commentSection = document.getElementById('JJ_Comments');

comments.forEach(function(element) {
  commentSection.appendChild(element);
});
  <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>
      </div>

答案 2 :(得分：0)

首先创建一个新的“评论保存容器”。

<div id='JJ_CommentsHidden'></div>

然后将所有评论从头到尾放置。 （默认）

$('#JJ_CommentsHidden').html(comments_ftl);

然后获取该容器中所有注释的长度。

commentAmount = $('#JJ_CommentsHidden').children('.JJ_Comment').length;

设置要附加到其中的空白字符串变量。

final = '';

然后进行反向for循环，以从头到尾的顺序遍历所有注释，抓住outterhtml并追加到字符串中。

           for (i = commentAmount - 1; i >= 0; --i) {
              final = final.concat($('#JJ_CommentsHidden').children('.JJ_Comment').eq(i).prop('outerHTML'));
              if(i==0){
                return $('#JJ_Comments').html(final);
              }
            }

检查irreteration是否为0，然后将其放置在要显示的div的html中。

一起：

           $('#JJ_CommentsHidden').html(text);
           commentAmount = $('#JJ_CommentsHidden').children('.JJ_Comment').length;
           final = '';
           for (i = commentAmount - 1; i >= 0; --i) {
              final = final.concat($('#JJ_CommentsHidden').children('.JJ_Comment').eq(i).prop('outerHTML'));
              if(i==0){
                return $('#JJ_Comments').html(final);
              }
            }
相关问题
最新问题