重新排序列表元素-jquery?[复制品]

var ul = $("ul");
var li = ul.children("li");

li.detach().sort();
ul.append(li);

这是一个简单的例子,其中 <li> 节点按某些默认顺序排序。我调用detach是为了避免删除与li节点相关联的任何数据/事件。

您可以传递一个函数进行排序,并使用一个定制的比较器进行排序。

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

如果有人想通过向上/向下移动某个列表一步来重新排序元素…

//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,我最喜欢的一件事是,如此快速地编写小插件是多么容易。

在这里,我们创建了一个小的附加组件,它接受一个选择器数组,并使用它来排序目标元素的子元素。

// Create the add-on

$.fn.orderChildren = function(order) {
	this.each(function() {
		var el = $(this);
		for(var i = order.length - 1; i >= 0; i--) {
			el.prepend(el.children(order[i]));
		}
	});
	return this;
};


// Call the add-on

$(".user").orderChildren([
	".phone",
	".email",
	".website",
	".name",
	".address"
]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="user">
	<li class="name">Sandy</li>
	<li class="phone">(234) 567-7890</li>
	<li class="address">123 Hello World Street</li>
	<li class="email">someone@email.com</li>
	<li class="website">https://google.com</li>
</ul>
<ul class="user">
	<li class="name">Jon</li>
	<li class="phone">(574) 555-8777</li>
	<li class="address">123 Foobar Street</li>
	<li class="email">jon@email.com</li>
	<li class="website">https://apple.com</li>
</ul>
<ul class="user">
	<li class="name">Sarah</li>
	<li class="phone">(432) 555-5477</li>
	<li class="address">123 Javascript Street</li>
	<li class="email">sarah@email.com</li>
	<li class="website">https://microsoft.com</li>
</ul>

函数在数组中向后循环并使用 .prepend 以便将任何未选中的元素推到末尾。

下面是一个jquery插件,用于帮助实现此功能: http://tinysort.sjeiti.com/

像这样?

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

demo

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

$('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...

更多的 here1 和 here2

查看jquery用户界面可排序

http://jqueryui.com/demos/sortable/