在jQuery Sort之后获取更新的顺序

Get updated order after jQuery Sort

本文关键字：更新 顺序 获取 之后 jQuery Sort      更新时间：2023-09-26

我正在使用jQuery UI的Sortable对一些列表项进行重新排序。我想根据排序后的更新顺序更新每个 li 的类。这是我的网页：

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

由于改变一个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具体取决于您要执行的操作。

为什么不在 css 中使用像 nth-child（） 选择器这样的东西。

例如：

#sortable li:nth-child(1) {
    /*insert your style for the first child here*/
}
#sortable li:nth-child(2) {
    /*insert your style for the second child here*/
}

所以我发现我可以使用 .index（） 来查找更新的排序顺序。然后我可以将每个 li 的类设置为它的索引。

$("#sortable").sortable({
    update: function(event, ui) { 
        $("#sortable li").each(function() {
            $(this).removeClass(); 
            var $index = $(this).index();
            $(this).prop("class", $index);
        });    
    }
});

看到这个小提琴：http://jsfiddle.net/2f9vkhxj/8/

相关文章：