Question

我有这样的事情：

<ul>
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
</ul>

我想知道是否有可能使用javascript或jquery将列表编号3移动到列表编号1的位置，如下所示：

<ul>
<li id="li3">3</li>
<li id="li2">2</li>
<li id="li1">1</li>
</ul>

谢谢你的时间！

Answer 1

没有jQuery解决方案：

var list = document.getElementsByTagName('ul')[0],
    items = list.getElementsByTagName('li'),
    i = items.length;
while (i--) list.appendChild(items[i]);

以下是演示：http://jsfiddle.net/wared/tJaJ9/。

根据cookie怪物的建议：

var list = document.getElementsByTagName('ul')[0],
    i = list.children.length;
while (i--) list.appendChild(list.children[i]);

只是为了好玩：

var list = document.getElementsByTagName('ul')[0],
    items = Array.prototype.slice.call(list.children);
while (items.length) list.appendChild(items.pop());

jQuery one：

$('ul').append($('li').get().reverse());

Answer 2

您可以使用 ajax sortable jquery插件。我的推荐教程之一是Sortable Lists Using jQuery UI。这里用户可以使用光标指针重新排序列表。

Answer 3

这应该适合你。

var length = $('ul li').length;

while (length--) $('ul').append($('ul li')[length]);

这是一个有效的jsfiddle

如何移动列表

3 个答案: