Question

我不会改变段落的顺序（用户点击的那个应该在顶部）。我想出了这个：

<div>
<p>11111111</p>
<p>22222222</p>
<p>33333333</p>
</div>

$("p").click(function(){
  var a = $(this).index();
  if (a != 0) {
   $(this).clone().prependTo("div");
   $(this).remove();
  }
})

但它只能＆＃34;一次＆＃34;。

http://plnkr.co/edit/6VlWbIlGi7fDBv6d0WT2?p=preview

Answer 1

你不是很远，它实际上比这更容易：只需将元素添加到其父级prependTo：

$("p").click(function() {
  var $this = $(this);
  $this.prependTo($this.parent());
});

<div>
  <p>11111111</p>
  <p>22222222</p>
  <p>33333333</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

如果你愿意，你甚至不需要jQuery：

$("p").click(function() {
  this.parentNode.insertBefore(this, this.parentNode.firstChild);
});

<div>
  <p>11111111</p>
  <p>22222222</p>
  <p>33333333</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

您可以使用.insertBefore();，还需要jQuery event delegation

＆＃13;

$("div").on('click','p:not(:nth-child(1))',function(){
  $(this).insertBefore('p:nth-child(1)');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>11111111</p>
<p>22222222</p>
<p>33333333</p>
</div>

＆＃13;

点击（）后更改元素的顺序

2 个答案: