JQuery - 如何将li移动到ul中的另一个位置？（交换两个li）

Question

有什么酷炫的方法可以实现这个吗？我需要一个脚本，能够交换 <ul> 中两个 <li> 的位置。 我认为这是可能实现的。感谢你的回复。

HTML

<div id="awesome">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>

伪代码Javascript（JQuery）

$("#awesome ul li:eq(1)").exchangePostionWith("#awesome ul li:eq(3)");

HTML结果

<div id="awesome">
<ul>
<li>Item 1</li>
<li>Item 4</li>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 5</li>
</ul>
</div>

- Tomkay

Answer 1

你可以使用jQuery的.after（）来移动元素。我克隆了其中一个，以便原始元素可以保留作为占位符。这就像你想要交换变量a和b一样，你需要第三个临时变量。

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

现在你的伪代码$("#awesome ul li:eq(1)").exchangePositionWith("#awesome ul li:eq(3)");已经不再是伪代码了 :-)

- David Tang

Answer 2

 $("ul li a").click(function () {
    $(this).parent().insertBefore('ul li:eq(0)');
  });


<ul>
    <li><a>a</a></li>
    <li><a>b</a></li>
    <li><a>c</a></li>
    <li><a>d</a></li>
    <li><a>e</a></li>
    <li><a>f</a></li>
</ul>

- Eligasht

---

点击后它会删除我的值。 - 3 rules