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()来更改位置。

Fiddle

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"));

Demo

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

Demo试试这个，

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

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

7 个答案:

DEMO

DEMO