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

Question

我有一个以反向顺序设置z索引的列表：

<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索引不改变时，我希望达到这样的效果。比如说，我想按照这个顺序对所有表示的项目进行排序:第二，第三，第一。但让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。

在jQuery可排序的change上执行同样的操作，以更新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();