Javascript 重新排列<；ul>；将活动元素保持在中心位置的步骤

我正在尝试构造一个菜单，当你点击它时，它会使活动的li保持在相同的位置，并向相邻的li添加一个类（这样它们就可以被设置样式） 这个想法是，允许我创建一个“3D轮子”效果-即点击的元素垂直放置在ul的中心

 <div id="container">
    <ul>
        <li>1</li>
        <li class="adj">2</li>
        <li class="active">3</li>
        <li class="adj">4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

什么想法重新排序UL，使活动元素总是在中间与正确的相邻Li？

---

有趣的问题；但我可能仍然不清楚“重新排列ul”的目的是什么——一些元素会交换位置吗？因为我不认为转换会与元素移除/移动一起工作，所以我在考虑一种更复杂的解决方案，即完全放弃标准布局，使用加法transform2d将块放置在正确的位置。@Katana314我的理由是，这种方法允许将所有块相对放置，然而，变换/定位方法强制它是绝对的。代码更少/强度更低？（也许？）我理解你的感受——我的想法是，所有的定位最终都是绝对的。您可能会在定位自己时做一些数学运算，但只要此选项轮只包含已知的元素类型，就可以非常轻松地根据“预期”索引计算位置。

$.fn.exchangePositionWith = function(selector) {
var other = $(selector);
this.after(other.clone());
other.after(this).remove();
};

$(this).addClass('active').exchangePositionWith('#frontpage_slider_menu li:eq(2)');