jquery - 使用 jquery 更改具有相同名称的 div 的顺序

Question

https://jsfiddle.net/psh23k7v/

  <span id="a">First </span>
  <span class="number">1</span>
</div>
<div class="wrapper">
  <span id="b">Second </span>
  <span class="number">1</span>
</div>
<div class="wrapper">
  <span id="c">Third </span>
  <span class="number">1</span>
</div>

<div>
<a id="knop">change</a>
</div>

$("#knop").click(function(){   

var aaa = $('.wrapper #a');
var bbb = $('.wrapper #b');
var ccc = $('.wrapper #c');

bbb.insertBefore(aaa);


}); 

这样 span 会移动第一个 wrapper 。但我希望整个第二个包装器移动到顶部（或另一个地方（想象 20 个包装器，你希望第 9 个移动到第二位）

标签： jquery

Answer 1

你可以这样做：

$("#knop").click(function() {

  var aaa = $('.wrapper #a');
  var bbb = $('#b').parent('.wrapper');
  var ccc = $('.wrapper #c');

  bbb.insertBefore(aaa);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <span id="a">First </span>
  <span class="number">1</span>
</div>
<div class="wrapper">
  <span id="b">Second </span>
  <span class="number">1</span>
</div>
<div class="wrapper">
  <span id="c">Third </span>
  <span class="number">1</span>
</div>

<div>
<a id="knop">change</a>
</div>