jquery中的移动元素答案

【问题标题】：Moving element in jqueryjquery中的移动元素
【发布时间】：2018-03-04 07:04:42
【问题描述】：

我有 5 个这样的按钮：

        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>

当有人点击这个按钮之一时，那个按钮在中间并且顺序不会改变（关于顺序，我的意思是1 2 3 4 5的顺序是连续的，所有的位置都会改变，但顺序会改变不改变），例如我点击数字1，它会是这样的：

        <button>4</button>
        <button>5</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>

或按钮编号 2：

        <button>5</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>

我不知道如何处理 javascript 或 jquery 请帮帮我。谢谢

【问题讨论】：

但为什么 button 2 和 button 3 正在改变他们的立场
可以使用api.jquery.com/insertbefore
关于顺序，我的意思是1 2 3 4 5的顺序是连续的
提供一个活生生的例子，向我们展示你到目前为止的尝试？

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

function rotate(n) {
  var body = "";
  for( var i = 0; i < 5; i++) {
   var pos =  (n + i + 2) % 5 + 1;
   body += "<button onclick=rotate("+pos+")>"+pos+"</button>";
  }
  $(".buttons").html(body);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <button onclick=rotate(1)>1</button>
  <button onclick=rotate(2)>2</button>
  <button onclick=rotate(3)>3</button>
  <button onclick=rotate(4)>4</button>
  <button onclick=rotate(5)>5</button>
</div>

【讨论】：

【解决方案2】：

$('button').click(function() {
  var parent = $(this).parent();

  //give each button its order (10,20,30,40,50)
  $('button').each(function(i) {
    $(this).attr('order', (i + 1) * 10);
  });

  //if the clicked button is after the middle button, then insert it before current middle
  // if it is before the middle button, make it appear after current middle
  $(this).attr('order', ($(this).attr('order') < 30) ? 35 : 25);


  //sort the buttons according to the new order..
  var buttons = $('button').detach().sort(function(a, b) {
    return $(a).attr('order') - $(b).attr('order')
  });


  //append them back to their parent.
  parent.append(buttons);


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</div>

【讨论】：