Javascript 如何更改这些div的顺序？

我有一列div。我试图使它成为这样，当我点击一个给定的div时，该div会根据div所在的位置替换div的上下位置。如果你看看结果，就会更好地理解它--

它几乎起作用了。请注意，当您单击底部的div时，它是如何上升的。但是，当我想再次点击那个div时，它应该会返回。但它不能做到这一点。你能指出我能做些什么使这项工作成功吗。以下是快速查看的代码：

<div id="colors">
    <div id="red"></div>
    <div id="blue"></div>
    <div id="yellow"></div>
    <div id="green"></div>
</div>

---

如果我单击顶部的div，它应该向下，而下面的div应该向上。如果我点击中间两个div中的一个，它应该向上，而过去在它上面的那一个应该向下。如果我单击底部的div，它应该会上升。

我想您正在寻找这个

工作

$(function(){
    $("#colors div").click(function(){
        if($(this).next().length > 0){
            $(this).next().after(this);
        }
        else{
            $(this).parent().prepend(this);
        }
    }); 
});

---

问题在于你对颜色的编号。。在这里，我更新了解决方案，以更好地处理数字

---

仅供参考，我不熟悉MOO工具，因此使用本机JS方法

您能否进一步解释所需的行为？一个div什么时候应该上升，什么时候应该下降？如果我点击上面的div，它应该下降，下面的div应该上升到原来的位置。如果我点击中间两个div中的一个，它应该向上，而过去在它上面的那一个应该向下。如果我点击底部的div，它应该会上升。我刚刚给了你一个使用moo工具和一点原生js的工作解决方案，你可以用moo工具等价的hanks替换它，但是你能用纯JavaScript写一下吗。我不知道是谁在这篇文章中添加了jquery标记。让我用纯JavaScript为您完成。

$(function(){
    $("#colors div").click(function(){
        if($(this).next().length > 0){
            $(this).next().after(this);
        }
        else{
            $(this).parent().prepend(this);
        }
    }); 
});