javascript - jQuery Sort 后获取更新的订单

Question

我正在使用 jQuery UI 的 Sortable 来重新排序一些列表项。我想根据排序后更新的顺序更新每个li的类。这是我的 html:

<ul id="sortable">
    <li class="1">apple</li>
    <li class="2">orange</li>
    <li class="3">pear</li>
    <li class="4">peach</li>
</ul>

我想要实现的是在将梨排序在苹果之上之后，我的类更新如下:

<ul id="sortable">
    <li class="1">pear</li>
    <li class="2">apple</li>
    <li class="3">orange</li>
    <li class="4">peach</li>
</ul>

这个 JSFiddle 接近我想要的，但我想更新类而不是 html:http://jsfiddle.net/4mcpq/3/

Answer 1

由于更改一个 li 的位置会更改所有其他 li 的 class，因此实现此目的的唯一明智方法是迭代在 .sortable 的 update 回调中的 li 元素上:

    "update": function (event, ui) {
        $(this).children().each(function (i, elem) {
            var li = $(elem), // cache lookup
                cssClass = elem.className.split(' ').filter(function (name, i, array) {
                    return /^js[-]\d+$/g.test(name);
                }).join(''); // adding .join('') to transform to string
            // classes cannot start with a number (see http://www.w3.org/TR/CSS21/grammar.html#scanner).
            // using pattern of "js-#" for the custom class
            $(elem).removeClass(cssClass).addClass('js-' + i);
        });
    }

工作演示:http://jsfiddle.net/4mcpq/210/

警告:如果您有数千个 li 元素，这可能会减慢您的 UI。根据您想要执行的操作，有更简单(且更明智)的方法来获得正确的目标 li。