Сортировать элементы по указанному порядку данных

Question

У меня есть список предметов в <ul>:

<li data-number="1"> Pierce </li>
<li data-number="2"> Annie </li>
<li data-number="3"> Jeff </li>
<li data-number="4"> Abed </li>
<li data-number="5"> Britta </li>

На самом деле, список с реальными данными намного длиннее, но потерпите меня. Как видите, элементы <li> перечислены в числовом порядке. Однако мне нужно переставить их так, чтобы они соответствовали указанному порядку в массиве:

Array(2, 3, 1, 5, 4)

Как мне это сделать? Если отсортировано по приведенному выше массиву, элементы должны выглядеть следующим образом:

<li data-number="2"> Annie </li>
<li data-number="3"> Jeff </li>
<li data-number="1"> Pierce </li>
<li data-number="5"> Britta </li>
<li data-number="4"> Abed </li>

Это кажется простым, но я посмотрел каждый метод jQuery в книге и не могу понять, как это сделать. Заранее огромное спасибо за любую помощь.

Дальнейшее уточнение:

Указанный порядок является динамическим. Однако элементы всегда изначально перечислены в числовом порядке.

Answer 1

Итерация по массиву, начиная с индекса 1. Затем добавьте этот элемент после его предыдущего элемента.Вот и все.

http://jsfiddle.net/jT8Tt/

var order = [2, 3, 1, 5, 4];

for (var i = 1; i < order.length; i++) {
    $('li[data-number="' + order[i] + '"]').insertAfter($('li[data-number="' + order[i - 1] + '"]'));
}

Или в чуть более читаемом формате

for (var i = 1; i < order.length; i++) {
    var curElem = $('li[data-number="' + order[i] + '"]');
    var prevElem = $('li[data-number="' + order[i - 1] + '"]');
    curElem.insertAfter(prevElem);
}

Answer 2

Немного поздно, но я уже написал это, так что, кажется, стыдно тратить его:

var newOrder = ['2', '3', '1', '5', '4'],
    $ul = $("ul"),
    $lis = $ul.children().remove();

$.each(newOrder, function(key,val){
    $ul.append($lis.filter('[data-number="' + val+ '"]'));
});

Демонстрация: http://jsfiddle.net/zgD3n/

Answer 3

Это будет немного грубо, так как я не уверен в вашем общем процессе, но я дам вам суть, и вы сможете его реализовать.

Если ключ предопределен ...

var sort_order = ['2', '3', '1', '5', '4']
$.each(sort_order function(key,value){

   // build you list here you can use the value from your sort_order
  // to match the data-number and print them out in the order of your choosing.
  // this will work if you dynamically create the sort_order as well.
});

Функция $ .each будет работать через массив sort_order, позволяя вам определить порядок.