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

问题描述

我有一个嵌套的可排序列表，可以动态添加或删除项目，并且可以嵌套 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 进行排序等，它工作正常，但我在排序时无法正确重置位置文本.我尝试使用的每个 CSS 选择器还包括 all 的子元素，而不仅仅是属于列表中的 li 元素，而不是任何属于子列表的元素.假设除了 id、position 和 text，所有列表中的每个 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 将选择 所有 ul 子元素的 li 元素，而不仅仅是直接子元素
• #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++;
        });
    });
}

目前，更改主级别的任何项目顺序都会重新编号 1-12，甚至是子列表.更改子列表中的任何项目都会为该列表提供正确的编号，但会导致父列表错误地计算编号中的所有子 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.

我觉得这是一个丑陋的 hack，但它确实有效:

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 */ }

这更乏味，因为您必须应用样式然后关闭它们(您可能不一定知道旧值是什么)，但它是唯一对 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 选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！