Упорядочить элементы списка - jQuery?

Можно ли изменить порядок элементов <li> с помощью JavaScript или чистого jQuery. Поэтому, если у меня есть глупый список, например:

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

Как мне перемещать элементы списка? Как и элемент списка с Cheese перед элементом списка с Foo или переместите Foo после Bar.

Возможно ли это? Если да, то как?

Ответы

Ответ 1

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

Ответ 2

Если кто-то хочет изменить порядок элементов, перемещая их вверх/вниз по одному списку за один шаг...

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

Ответ 4

Одна из моих любимых вещей о 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">[email protected]</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">[email protected]</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">[email protected]</li>
	<li class="website">https://microsoft.com</li>
</ul>

Ответ 5

что-то вроде этого?

​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...

больше этого here1 и here2