78

アイテムを動的に追加または削除でき、n レベルの深さでネストできる、ネストされた並べ替え可能なリストがあります。ネストすると、親として選択された li 要素に新しい ul 要素が挿入されます。リストの初期状態は次のようなものです。

<ul id="parent">
    <li id="One"><a href="" class="listLink"><span class="position">1</span>One</a></li>
    <li id="Two"><a href="" class="listLink"><span class="position">2</span>Two</a></li>
    <li id="Three"><a href="" class="listLink"><span class="position">3</span>Three</a>
        <ul>
            <li id="A"><a href="" class="listLink"><span class="position">1</span>A</a></li>
            <li id="B"><a href="" class="listLink"><span class="position">2</span>B</a></li>
            <li id="C"><a href="" class="listLink"><span class="position">3</span>C</a></li>
            <li id="D"><a href="" class="listLink"><span class="position">4</span>D</a></li>
            <li id="E"><a href="" class="listLink"><span class="position">5</span>E</a></li>
            <li id="F"><a href="" class="listLink"><span class="position">6</span>F</a></li>                    
        </ul>
    </li>   
    <li id="Four"><a href="" class="listLink"><span class="position">4</span>Four</a></li>
    <li id="Five"><a href="" class="listLink"><span class="position">5</span>Five</a></li>
    <li id="Six"><a href="" class="listLink"><span class="position">6</span>Six</a></li>                    
</ul>

MooTools を使用して並べ替えなどを行っていますが、正常に動作しますが、並べ替え時に位置テキストを正しくリセットするのに問題があります。私が使用しようとしているすべての CSS セレクターには、リストに属し、サブリストに属していない li 要素だけでなく、すべての子も含まれています。id、位置、およびテキストを除いて、すべてのリストの各 li 要素が他のすべての要素と同一であると仮定します。直接の子のみを取得するセレクターはありますか? これを行う別の方法はありますか？

言及されているようないくつかの子セレクターを試しました：

  • ul > li直接の子だけでなく、ul の子であるすべてのli 要素を選択します。
  • #parent > li上記と同じことを行います。

これは、アイテムがドロップされたときに現在実行している関数です。これは、並べ替えを処理せず、位置を更新するだけで正常に機能します。これは MooTools の構文でもあることに注意してください。

var drop = function(el){
    el.getParents('ul').reverse().each(function(item){
        var posCount = 1;
        item.getElements('li a span[class=position]').each(function(pos){
            pos.set('text', posCount);
            posCount++;
        });
    });
}

現在、メイン レベルでアイテムの順序を変更すると、サブリストも含めてすべて 1 ～ 12 の番号が付け直されます。サブリストの項目を変更すると、そのリストに正しい番号が付けられますが、親リストが番号付けですべての子 li 要素を誤ってカウントする原因になります。

これは醜いハックのように感じますが、うまくいきます：

var drop = function(){
    var ulCount = 1;
    $$('ul').each(function(item){
        if(item.get('id') != 'parent') { 
            item.set('id', 'id-'+ulCount);
        }
        var elId = item.get('id');
        var posCount = 1;
        $(document).getElements('#'+elId+'>li>a>span[class=position]').each(function(pos){
            pos.set('text', posCount);
            posCount++;
        });
        ulCount++;
    });
}
4

2 に答える 2

118 
ul > li

直接の子のみを行います。たとえば、最上位のリスト要素のみを実行するには、次のようにします。

#parent > li

注:これは IE6 ではサポートされていません。

下位互換性のための一般的な回避策は、次のようにすることです。

#parent li { /* style appropriately */ }
#parent li li { /* back to normal */ }

スタイルを適用してからオフにする必要があるため、より面倒ですが (古い値が何であるかを必ずしも知らない場合があります)、IE6 に適した唯一の純粋な CSS 回避策です。

編集: MooTools 固有の問題があります。getElements() は、直接の子だけでなく、すべての子孫を返します。getChildren()を使用してみてください。

var drop = function(el){
    el.getParents('ul').reverse().each(function(item){
        var posCount = 1;
        item.getChildren("li").getElements("a span[class=position]").each(function(pos){
                pos.set('text', posCount);
                posCount++;
        });
    });
}

またはそのようなもの。

于 2009-04-08T22:28:04.083 に答える