jQuery UI 可排序：如何保持更改项目的 css 值不变？

Question

我有一个按相反顺序设置的 z-indexes 列表：

<ul>
    <li style="z-index: 3;">First item</li>
    <li style="z-index: 2;">Second item</li>
    <li style="z-index: 1;">Third item</li>
</ul>

使用 jQuery UI 可排序，我希望在对项目进行排序时元素的 z-indexes 不改变时达到效果。比如说，我想按以下顺序对所有表示的项目进行排序：第二、第三、第一。但保持 z 索引不变！

谢谢。

这是我到目前为止使用 JS 所取得的成就（我是新手）：

$('#widget-2').sortable({
        start: function(event, ui) {
            ui.item.data('originIndex', ui.item.css('z-index'));
        },
        change: function(event, ui) {
            ui.item.data('placeholderIndex', ui.placeholder.css('z-index'));

            var originIndex = ui.item.data('originIndex');
            var placeholderIndex = ui.item.data('placeholderIndex');

            ui.placeholder.css('z-index', originIndex);
            ui.item.css('z-index', placeholderIndex);
        }
    });

Answer 1

由于您已经在页面上使用了 JavaScript，我建议您使用这个小 jQuery 插件计算并在文档准备好时分配 z-index：

$.fn.reverseZIndex = function () {
    // get the children of the list.
    var $children = this.children(),
        length = $children.length;

    $children.each(function (index) {
        // assign z-index, high values to low.
        this.style.zIndex = length - index;
    });

    return this;
};

$(document).ready(function () {
    var $widget2 = $('#widget-2');

    // calculate reversed z-index.
    $widget2.reverseZIndex();

    // initialize sortable.
    $widget2.sortable(...);
});

然后您可以在任何给定列表上使用此插件，<ul> 或 <ol>（甚至是父级 <div>），因此子级将有 z-index 以相反的顺序。

在 change 上的 jQuery 可排序中执行相同操作，以更新 z-index：

$widget2.sortable({
    ...
    change: function () {
       ...
       $widget2.reverseZIndex();
    }
    ...
});

Answer 2

使用nth子http://codepen.io/anon/pen/pvEdMw

HTML

<ul>
<li >aaa</li>
<li>aaaasdsd</li>
<li>fgf</li>
</ul>

CSS

li{
 background-color:orange;
 }

li:nth-child(n-3){
color:red;
}

li:nth-child(n+2){
color:blue;
} 

li:nth-child(n+3){
color:green;
}

JQUERY

$('ul').sortable();