Question

我正在敲打与二年级数学有关的问题，而不是编程问题。这里：四个<div>元素一个接一个地水平放置。单击一个时，脚本会将其放在前面。你点击另一个，它也放在前面等等。你得到了图片。现在，我想要做的是使用原始订单对剩余的<div>元素（除第一个之外的所有元素）进行排序。

也许这张照片会说清楚：

enter image description here

在第3步之后，C应放在B之后，所以它应该是这样的：D A B C。

以下是示例代码：

<html>
  <head>
    <title>mixit</title>
    <style type="text/css">
      .insidebox{
      width: 50px;
      height: 50px;
      line-height: 50px;
      margin: 0 0 0 20px;
      text-align: center;
      float: left;
      border: black solid 3px;
      font-family: sans-serif;
      cursor: pointer;
      }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript">

    </script>
  </head>
  <body>
    <div id="container">
      <div id="a" class="insidebox">A</div>
      <div id="b" class="insidebox">B</div>
      <div id="c" class="insidebox">C</div>
      <div id="d" class="insidebox">D</div>
    </div>
  </body>
</html>

现在，我知道我可以使用.insertAfter()将元素放在前面，但是我应该如何处理排序部分？关键字是初始订单，而非字母顺序。信件和方框仅用于说明目的。

Answer 1

这应该做你想要的。

var $initial = $('.insidebox');
$('.insidebox').click(function(){
    var $this = $(this);

    $this.parent()
         .prepend($this)
         .append( $initial.not(this) );
});

您存储初始列表，并在每次点击时重新附加（不包括当前的）

演示 http://jsfiddle.net/gaby/Dyafx/

<强>更新

地狱..你甚至不需要在当前元素前面添加..当你追加其余元素时，他们会在点击之后去追寻..

var $initial = $('.insidebox');
$('.insidebox').click(function(){
    $(this).parent()
         .append( $initial.not(this) );
});

演示 http://jsfiddle.net/gaby/Dyafx/1/

Answer 2

将初始订单存储为数组。然后按数组索引排序 - 第一个（A）将有数组索引1，等等。

Answer 3

这样做：

$(document).ready(function(){
    $("#container div").click(function(){
       $(this).prependTo($(this).parent());
    });
});

欢呼声。

使用jQuery </div>对兄弟<div>进行排序

3 个答案: