我有一个嵌套的可排序列表，可以动态添加或删除项目，并且可以嵌套 n 层。嵌套时，新的 ul 元素将注入到选定的 li 元素中

我有一个嵌套的可排序列表，可以动态添加或删除项目，并且可以嵌套 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 的 所有
• #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++;
    });
}