旧评论加载到jquery

Question

我有这样的评论安排，默认情况下会在顶部显示固定评论。

 <button>Show All Comments</button>

  <ul class="comments">
    <!--Ajax loaded hidden posts-->
     <li class="fixed">Fixed Comment</li>
    <li>Comment</li>
    <li>Comment</li>
    <li>Comment</li>
    <li>Comment</li>
    <li>Comment</li>

    <li>Comment</li>
    <li>Comment</li>
    <li>Comment</li>
    <li>Comment</li>
</ul>

当我点击＆＃34;按钮＆＃34;它会在顶部加载过去的评论，而fixed帖子会在列表中移位..

问题

使用Jquery，如果单击按钮，如何将此.fixed个用户重新定位到顶部？

＆＃13;

＆＃13;

$(document).on("click","button",function(){

//Show Ajax loaded hidden posts code
   $(".comments").prepend("<li>Old Comment</li><li>Old Comment</li><li>Old Comment</li><li>Old Comment</li><li>Old Comment</li><li>Old Comment</li>")


//requested code
   /* $(".comments").find(".fixed").append to new top?*/


})

＆＃13;

.fixed{border:1px solid red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<button>Show All Comments</button>
<ul class="comments">
	    <!--Ajax loaded hidden posts-->
    <li class="fixed">Fixed Comment</li>
		<li>Comment</li>
		<li>Comment</li>
		<li>Comment</li>
		<li>Comment</li>
		<li>Comment</li>
		
		<li>Comment</li>
		<li>Comment</li>
		<li>Comment</li>
		<li>Comment</li>
	</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

由于（正如您所指出的）可能存在或不存在.fixed条评论，因此我们不能仅仅通过在.fixed之后插入新评论来作弊。相反，在你正在做的前面添加新的注释，然后将固定的注释添加到同一个节点上（这将自动将它们从DOM树中的原始位置移除。）这适用于任意数量的.fixed元素（包括零）。

$(document).on("click", "button", function() {
  // add new elements:
  $(".comments").prepend("<li>Old Comment</li><li>Old Comment</li><li>Old Comment</li><li>Old Comment</li><li>Old Comment</li><li>Old Comment</li>")

  // rearrange the .fixed elements back to the top:
  $(".fixed").prependTo($('.comments'))
})

.fixed {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<button>Show All Comments</button>
<ul class="comments">
  <li class="fixed">Fixed Comment</li>
  <li>Comment</li>
  <li>Comment</li>
  <li>Comment</li>
  <li>Comment</li>
  <li>Comment</li>
  <li>Comment</li>
  <li>Comment</li>
  <li>Comment</li>
  <li>Comment</li>
</ul>

Answer 2

而不是使用.prepend使用.after，如下所示。我还将$(".comments")更改为$(".fixed")：

＆＃13;

＆＃13;

$(document).on("click","button",function(){

//Show Ajax loaded hidden posts code
   $(".fixed").after("<li>Old Comment</li><li>Old Comment</li><li>Old Comment</li><li>Old Comment</li><li>Old Comment</li><li>Old Comment</li>")


//requested code
   /* $(".comments").find(".fixed").append to new top?*/


})

＆＃13;

.fixed{border:1px solid red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<button>Show All Comments</button>
<ul class="comments">
	    <!--Ajax loaded hidden posts-->
    <li class="fixed">Fixed Comment</li>
		<li>Comment</li>
		<li>Comment</li>
		<li>Comment</li>
		<li>Comment</li>
		<li>Comment</li>
		
		<li>Comment</li>
		<li>Comment</li>
		<li>Comment</li>
		<li>Comment</li>
	</ul>

＆＃13;

＆＃13;

＆＃13;