更改可排序的jQuery UI列表中的CSS不是那麼簡單？

Question

這裏是我可憐的代碼：http://jsfiddle.net/jesspoub/gjDcd/

我想只有在名單藍色和其他所有 在紅色的五個第一項。實際上，如果您拖動「sortable1」中的所有項目，則所有項目都會改變顏色。我需要僅保留藍色的第一個項目位置。 我newbe用jQuery所以任何幫助將非常感激..

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

THX， 傑西卡

Answer 1

試試這個jsFiddle example

$("#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(); 

Answer 2

使用:lt和:gt選擇，添加/上sortableupdate這樣除去顏色class：

$(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 3

排序（雙關）你的問題。

基本上我只是使用css來使用'下一個兄弟'與第一個孩子僞代碼選擇器和一個有5個級別的規則來設計列表的樣式。

見working fiddle

和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 
}