jquery - 使用 jQuery 将一个列表项与另一个交换？

Question

有没有办法使用 jQuery 将一个列表项与另一个交换？

假设这个列表：

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

如何用第 4 项更改第 2 项的位置？

使它

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

有什么办法不使用绝对定位？

Answer 1

$('#2').insertAfter($('#3'));
$('#4').insertAfter($('#1'));

jsFiddle 示例

Answer 2

var lis = $('ul li');
lis.eq(3).after(lis.eq(1)).end().eq(0).after(lis.eq(3));

http://jsfiddle.net/Px6be/

只是为了好玩：

$.fn.swap = function(elem) {
    var elem = $(elem),
        before = elem.prev();

    this.after(elem);
    before.after(this);
};

$('#2').swap('#4');

http://jsfiddle.net/Px6be/1/

Answer 3

您可以查看名为“Sortable”的 jQuery 库。您可以阅读它并在此处查看现场演示：http: //jqueryui.com/sortable/