Javascript 重新排序列表元素-jQuery？

可以使用JavaScript或纯jQuery对

元素重新排序吗。因此，如果我有一个愚蠢的列表，如下所示：

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Cheese</li>
</ul>

福
酒吧
奶酪

如何移动列表元素？例如，将带有

Cheese

的列表元素放在带有

Foo

的列表元素之前，或将

Foo

移动到

Bar

之后

---

可能吗？如果是这样，怎么做？

看看jquery ui可排序表

像这样的事

​var li = $('ul li').map(function(){
              return this;
         })​.get();
$('ul').html(li.sort());

我有点迷路了你可能想要这样的东西

$('ul#list li:first').appendTo('ul#list'); // make the first to be last...
$('ul#list li:first').after('ul#list li:eq(1)'); // make first as 2nd...
$('ul#list li:contains(Foo)').appendTo('ul#list'); // make the li that has Foo to be last...

更多的

这是一个简单的示例，

节点按默认顺序排序。我调用detach是为了避免删除与li节点关联的任何数据/事件

您可以传递一个函数进行排序，并使用自定义比较器进行排序

li.detach().sort(function(a, b) {
   // use whatever comparison you want between DOM nodes a and b
});

---

这里有一个jQuery插件来帮助实现这一功能：

如果有人希望通过一次一步地将元素上下移动来重新排序元素

//element to move
var $el = $(selector);

//move element down one step
if ($el.not(':last-child'))
    $el.next().after($el);

//move element up one step
if ($el.not(':first-child'))
    $el.prev().before($el);

//move element to top
$el.parent().prepend($el);

//move element to end
$el.parent().append($el);

---

关于jQuery，我最喜欢的一件事是，如此快速地编写微小的附加组件是多么容易

在这里，我们创建了一个小插件，它接受一个选择器数组，并使用它对目标元素的子元素进行排序

//创建附加组件
$.fn.orderChildren=函数（顺序）{
这个。每个（函数（）{
var el=$（本）；
对于（var i=order.length-1；i>=0；i--）{
el.prepend（el.children（订单[i]）；
}
});
归还这个；
};
//调用附加组件
$（“.user”）.orderChildren([
“.phone”，
“.email”，
“.website”，
“.name”，
“.地址”
]);


桑迪
（234）567-7890
123你好世界街
someone@email.com
https://google.com


乔恩
（574）555-8777
富巴街123号
jon@email.com
https://apple.com


莎拉
（432）555-5477
123街
sarah@email.com
https://microsoft.com
虽然非常酷，但我不需要用户能够求助，我只想知道我是否可以通过编程实现，使用jQuery或javascript。啊，我明白了！不是从你的问题上了解到的我无法让它发挥作用。。有人能在JSFIDLE上演示一下吗？对我来说很好。下面是JSFIDLE示例：漂亮的解决方案。正是我需要的。非常感谢您，先生，在这个美好的周五下午，您没有思考关于
detach（）
。谢谢我完全不明白为什么需要拆离

//element to move var $el = $(selector); //move element down one step if ($el.not(':last-child')) $el.next().after($el); //move element up one step if ($el.not(':first-child')) $el.prev().before($el); //move element to top $el.parent().prepend($el); //move element to end $el.parent().append($el);