CSS选择器仅针对直接子级，而不针对其他相同后代

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个嵌套的可排序列表，可以动态添加或删除项目，并且可以嵌套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元素，而不是子列表中的所有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解决方法。

好的，您有一个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++;
        });
    });
}

或类似的东西。

以上是 CSS选择器仅针对直接子级，而不针对其他相同后代 的全部内容， 来源链接： utcz.com/qa/404602.html

回到顶部