jquery - 在可排序的 jquery ui 列表中更改 css 不是那么简单吗？

Question

这是我糟糕的代码：http: //jsfiddle.net/jesspoub/gjDcd/

我只希望列表中的第一项是蓝色的，而其他所有的都是红色的。实际上，如果您拖动“sortable1”中的所有项目，所有项目都会改变颜色。我只需要将 5 个第一个项目位置保留为蓝色。我是 jquery 的新手，所以任何帮助都会非常感激..

                 <script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"}).disableSelection();});
                </script>

谢谢，杰西卡

Answer 1

使用:lt和选择器，像这样:gt添加/删除颜色：classsortable update

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        update: function() {
            $('li:lt(5)').removeClass('color1 color2').addClass('color1');
            $('li:gt(4)').removeClass('color1 color2').addClass('color2');
        }
    }).disableSelection();

    $('li:lt(5)').addClass('color1');
    $('li:gt(4)').addClass('color2');
});

jsFiddle

Answer 2

排序（双关语）你的问题。

基本上，我只是使用 css 使用“下一个兄弟”结合第一个子伪选择器和一个具有 5 个级别的规则来设置列表样式。

见工作小提琴

而CSS是：

 #sortable1 li, #sortable2 li {
 margin: 0 5px 5px 5px;
 padding: 5px;
 font-size: 1.2em;
 width: 160px;
 color:red;
 }

 #sortable1 li:first-child,
 #sortable1 li:first-child+li, 
 #sortable1 li:first-child+li+li, 
 #sortable1 li:first-child+li+li+li, 
 #sortable1 li:first-child+li+li+li+li {
 color:green
 }

Answer 3

试试这个jsFiddle 例子

$("#sortable1 li").addClass('green');
$("#sortable2 li").addClass('red');
$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    stop: function () {
        var lis = $('#sortable1 li').add('#sortable2 li');
        $(lis).each(function () {
            if ($(this).index('li') <= 4) {
                $(this).removeClass('red ui-state-highlight').addClass('green ui-state-default');
            } else {
                $(this).removeClass('green ui-state-default').addClass('red ui-state-highlight');
            }
        });
    }
}).disableSelection();