CSS选择器，仅定位直接子项，而不是其他相同的后代 [英] CSS selector for targeting only immediate children and not other identical descendants

问题描述

我有一个嵌套排序列表，可以动态添加或删除项目，并可以嵌套n层深。在嵌套时，新的ul元素被注入到被选择为父元素的任何li元素中。列表的初始状态如下：

I have a nested sortable list that can have items dynamically added or removed and can be nested n-levels deep. On nesting, a new ul element is injected into whatever li element is selected to be the parent. The initial state of the list is something like the following:

<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做排序等等， m在排序时正确地重置位置文本有麻烦。我尝试使用的每个CSS选择器也包括所有的子元素，而不仅仅是属于列表中的li元素，而不是属于子列表的li元素。假设除了id，位置和文本之外，所有列表中的每个li元素都与所有其他列表相同。有没有选择器只获得直接的孩子？还有另一种方法吗？

I'm using MooTools to do the sort, etc., and it works fine, but I'm having trouble resetting the position text correctly on sort. Every CSS selector I try to use also includes all of the children rather than just the li elements that belong in the list and not any belonging to sublists. Assume that except for id, position, and text, each li element in all lists is identical to all others. Is there a selector for getting only the immediate children? Is there another way to do this?

我尝试过一些像上面提到的子选择器：

I tried some child selectors like the ones mentioned:

• ul> li c
#parent> li 与上述相同。

• ul > li Will select all li elements that are a child of a ul, not just the immediate children
• #parent > li Does the same as above.

这是我目前运行的函数项目被删除，它不处理排序，这工作正常，只是更新位置。注意它也是MooTools语法：

Here is the function that I'm currently having run when an item is dropped, which doesn't handle the sorting, which works fine, just updating the position. Note that it is also MooTools syntax:

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

目前，更改主级别上的任何项目顺序将重新编号，甚至子列表。更改子列表中的任何项目将为该列表提供正确的数字，但会导致父列表对编号中的所有子li元素进行错误计数。

Currently, changing any item order on the main level will renumber everything 1-12, even the sublists. Changing any item on a sublist will give the correct numbers for that list, but cause the parent lists to incorrectly count all child li elements in numbering.

我觉得这是一个丑陋的黑客，但它的工作原理：

I feel like this is an ugly hack, but it works:

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

只适用于直接子女。因此，例如，只能使用顶级列表元素：

only does the immediate children. So, for example, to do only the top level list elements you could use:

#parent > li

注意：IE6不支持此功能。

Note: this isn't supported on IE6.

向后兼容性的常见解决方法是执行如下操作：

The common workaround for backwards compatibility is to do something like this:

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

b $ b

这是更繁琐的，因为你必须应用样式，然后关闭它（你可能不一定知道旧的值是什么），但它是唯一的IE6友好的纯CSS解决方法。

It's more tedious because you have to apply styles and then turn them off (and you may not necessarily know what the old values are) but it's the only IE6-friendly pure CSS workaround there is.

编辑：确定您有MooTools的特定问题。 getElements（）返回所有后代，而不仅仅是直接子节点。尝试使用 getChildren（）。

Ok you have a MooTools specific issue. getElements() returns all descendants, not just immediate children. Try using 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++;
        });
    });
}

或类似的东西。

这篇关于CSS选择器，仅定位直接子项，而不是其他相同的后代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！