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

这是我糟糕的代码：

我只想要清单上的五个蓝色的第一项，全部都要 其他颜色为红色。实际上，如果您拖动“sortable1”中的所有项目，所有项目都会改变颜色。我只需要将5个项目的第一个位置保持为蓝色。 我是jquery的新手，因此任何帮助都将非常感谢

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

$（函数（）{
$（“#可排序1，#可排序2”）。可排序({
connectWith:“.connectedSortable”}）.disableSelection（）；}）；

thx，

---

Jessica

使用

:lt

和

:gt

选择器，在

可排序的
上添加/删除颜色
类
，如下所示：

$(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');
});

整理（双关语）你的问题

基本上，我只是使用css来设置列表的样式，使用“下一个同级”和第一个子psuedo选择器以及一个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
 }

试试这个

$（“#可排序1 li”）.addClass（'green'）；
$（“#可排序2 li”）.addClass（'red'）；
$（“#可排序1，#可排序2”）。可排序({
connectWith:“.connectedSortable”，
停止：函数（）{
var lis=$（'sortable1li'）。添加（'sortable2li'）；
$（lis）。每个（功能）{
如果（$（this）.index（'li'），如果你想成为一个真正的聪明人，你可以使用
#container>ul[id=*'sortable']：first child
代替
#sortable1
将规则应用于第一个ul，以防您在DOM中交换列表位置。所有解决方案都有效，不知道是什么更好，但非常感谢您的帮助和解释Jessica请参阅答案jess并记住标记对您有用的答案；）这是答案左边的勾号；）两个汉克人！两种解决方案都有效，不知道什么更好：汉克人！两种解决方案都有效，不知道什么更好。所有解决方案都有效，不知道什么更好，但非常感谢你的帮助和解释。杰西卡很高兴你找到了解决方案。
$("#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();