jquery - ソート可能なjquery uiリストのcssを変更するのはそれほど単純ではありませんか?

Question

これが私の貧弱なコードです: http://jsfiddle.net/jesspoub/gjDcd/

リストの最初の 5 つの項目だけを青色で、他のすべてを赤色で表示したいと思います。実際、「sortable1」のすべてのアイテムをドラッグすると、すべてのアイテムの色が変わります。最初の 5 つのアイテムの位置だけを青色で保持する必要があります。私はjqueryを初めて使用するので、どんな助けでも大歓迎です..

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

thx、ジェシカ

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

jsフィドル

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();