如何使用Jquery更改列表元素的顺序？

Question

我有一个如下所示：

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

如何使用Jquery更改列表元素的顺序？ 因此，在加载时，新列表应如下所示：

<ul id="list">
        <li>2</li>
        <li>1</li>
        <li>3</li>
</ul>

是否可以使用Jquery实现？

Answer 1

像这样使用，

$("#list li:eq(0)").before($("#list li:eq(1)"));

eq选择器选择具有索引的元素。 然后你可以使用before()或after()来改变位置。

小提琴

Answer 2

你的jquery会。 你可以使用insertBefore。

$('#list').find('li:eq(1)').insertBefore('li:eq(0)');

DEMO

Answer 3

尝试，

var lists = $('#list li');
lists.filter(':contains(2)').insertBefore(lists.filter(':contains(1)'));

DEMO

要么

var lists = $('#list li');
lists.filter(':nth-child(2)').insertBefore(lists.filter(':nth-child(1)'));

DEMO

Answer 4

无论项目数量多少，要使第一个最后一个：

$("#list li:last").after($("#list li:first"));

演示

Answer 5

   $("#list").prepend($("li:eq(1)"));

DEMO

要么

 $("li:eq(1)").prependTo("#list");

DEMO

Answer 6

如果您使用这样的html：

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

你可以使用after / before或appendTo / prependTo来操作列表和其他DOM节点：

var $list = $('#list'),
    $items = $list.children(),
    $firstItem = $items.first();

//remove first item from DOM
$firstItem.detach();
//set first item after second
$items.eq(1).after($firstItem);

在此之后你将有这样的清单：

<ul id="list">
    <li>2</li>
    <li>1</li>
    <li>3</li>
</ul>

Fiddle

Answer 7

演示尝试这个，

  alert($('li').eq(0).insertAfter($('li').eq(1)));