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

reorder list elements - jQuery?

提问by Alex

Is it possible to reorder <li>elements with JavaScript or pure jQuery. So if I have a silly list like the following:

是否可以<li>使用 JavaScript 或纯 jQuery重新排序元素。所以如果我有一个像下面这样的愚蠢列表：

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

How would I move the list elements around? Like put the list element with Cheesebefore the list element with Fooor move Footo after Bar.

我将如何移动列表元素？就像将列表元素放在列表元素Cheese之前Foo或移动Foo到之后Bar。

Is it possible? If so, how?

是否可以？如果是这样，如何？

回答by Anurag

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

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

This is a simple example where <li>nodes are sorted by in some default order. I'm calling detach to avoid removing any data/events associated with the li nodes.

这是一个简单的示例，其中<li>节点按某种默认顺序排序。我正在调用 detach 以避免删除与 li 节点关联的任何数据/事件。

You can pass a function to sort, and use a custom comparator to do the sorting as well.

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

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

回答by alexg

If someone is looking to reorder elements by moving them up/down some list one step at a time...

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

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

回答by Sandy Gifford

One of my favorite things about jQuery is how easy it is to write tiny little add-ons so quickly.

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

Here, we've created a small add-on which takes an array of selectors, and uses it to order the children of the target elements.

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

// 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">[phone]</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">[phone]</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">[phone]</li>
 <li class="address">123 Javascript Street</li>
 <li class="email">[email protected]</li>
 <li class="website">https://microsoft.com</li>
</ul>

The function loops backwards through the array and uses .prependso that any unselected elements are pushed to the end.

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

回答by dennismonsewicz

Here is a jQuery plugin to aid with this functionality: http://tinysort.sjeiti.com/

这是一个 jQuery 插件来帮助实现此功能：http: //tinysort.sjeiti.com/

回答by Reigel

something like this?

像这样的东西？

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

demo

演示

I was somewhat lost you may be wanting something like this...

我有点失落你可能想要这样的东西......

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

more of it here1and here2

更多这里1和这里2

回答by Karl Johan

Have a look at jquery ui sortable

看看 jquery ui sortable

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

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