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的位置会更改其他class的{{1}}，唯一明智的方法是迭代li元素li的{{1}}回调：

update

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

警告：如果您有数千个.sortable元素，这可能会降低您的UI速度。根据您尝试做的事情，有更容易（和更健全）的方法来获得正确的目标"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); }); }。

Answer 2

为什么不在你的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*/
}

Answer 3

所以我发现我可以使用.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/

在jQuery Sort之后获取更新的订单

3 个答案: