Question

我知道如何将列表元素的位置保存到数据库或localstorage或类似的东西。但是如何使用JavaScript从我的数组中保存的位置重新排序列表？

我看了一下StackOverflow并找到了以下代码，但它不起作用（它只是清空了我的列表）：

// Get your list items
var items = $('#sortable').find('li');

// The new index order for each item
var order = store.get('sortableIDsOrder');

// Map the existing items to their new positions        
var orderedItems = $.map(order, function(value) {
    return items.get(value);
});

// Clear the old list items and insert the newly ordered ones
$('#sortable').empty().html(orderedItems);

我的数组看起来像：

[portrait-sms,portrait-pc,portrait-mail,portrait-calendar,portrait-facebook,portrait-twitter,portrait-whatsapp,portrait-skype,portrait-viber,portrait-instagram]

我的HTML看起来像：

<li id="portrait-sms"><a href="sms:">...</li>
<li id="portrait-mail"><a href="mailto:">...</li>
<li id="portrait-pc"><a href="#">...</li>
...

Answer 1

我能想到的最简单的解决方案，只考虑数组（假设你从某个地方检索过），是：

// assuming this is the array you've recovered from whereever:
var storedArray = ['portrait-sms',
                   'portrait-pc',
                   'portrait-mail',
                   'portrait-calendar',
                   'portrait-facebook',
                   'portrait-twitter',
                   'portrait-whatsapp',
                   'portrait-skype',
                   'portrait-viber',
                   'portrait-instagram'];

function reorder(orderedArray) {
    // caching variables:
    var el, pre, p;2
    // iterating over the elements of the array, using Array.prototype.forEach:
    orderedArray.forEach(function (a, b, c) {
        // a: the current element in the array,
        // b: the index of the current element in the array,
        // c: the array itself
        if (b > 0) {
            // caching the element with the id of the element in the array:
            el = document.getElementById(a);
            // finding the parentNode of that element:
            p = el.parentNode;
            // getting the previous element:
            pre = document.getElementById(c[b - 1]);

            // inserting the element with the id of the current element
            // before the nextSibling of the element with the id of the
            // previous element in the array:
            p.insertBefore(el, pre.nextSibling);
        }
    });
}

reorder(storedArray);

JS Fiddle demo

参考文献：

Answer 2

如果您事先知道数据库数组中的元素并且它们具有静态值，则可以通过迭代数据库数组并形成在加载UI时使用的新JS数组来创建新的JavaScript数组变量。

另一方面，如果您的要求是在UI加载时间内对数组进行排序，而不是按固定顺序显示元素（从数据库中检索），则可以使用像DataTable这样的JQuery表插件。

使用jQuery sortable从数组中排序列表

2 个答案: