直系の子のみを対象とし、他の同一の子孫を対象としないためのCSSセレクタ

質問

私は、動的に追加または削除されたアイテムを持つことができ、nレベルの深さにネストすることができるネストされたソート可能なリストを持っています。入れ子になると、新しい ul 要素が、親として選択されたどの li 要素にも注入されます。リストの初期状態は、次のようなものです。

<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、position、textを除いて、すべてのリストの各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++;
    });
}

どのように解決するのですか？

ul > li

は直接の子要素のみを処理します。ですから、例えば、トップレベルのリスト要素だけを行うには、次のようにします。

#parent > li

注意 はIE6に対応していません。

後方互換性のための一般的な回避策は、次のようなものです。

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

スタイルを適用してからオフにしなければならないので、より面倒ですが（そして、古い値が何であるかを必ずしも知っているとは限りません）、これは唯一の IE6 フレンドリーな純粋 CSS 回避方法です。

編集する。 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++;
        });
    });
}

といった具合に