CSSselect器，仅用于定位直接的孩子，而不是其他相同的后代

我有一个嵌套的可sorting列表，可以dynamic地添加或删除项目，并可以嵌套深层次。 在嵌套中，将新的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做sorting等，并且它工作正常，但我有sorting时正确重置位置文本的问题。 我尝试使用的每个CSSselect器都包含所有子元素，而不仅仅是属于列表中的元素，而不包含属于子列表的元素。 假设除了id，position和text之外，所有列表中的每个li元素都与其他元素相同。 有没有一个select只获得直接的孩子？ 有没有另外一种方法来做到这一点？

我尝试了一些像上面提到的select器：

• ul > li将select所有 li元素，它们是ul的子元素，而不仅仅是直接的子元素
• #parent > li和上面一样。

这里是我当前正在运行的function，当一个项目被删除，不处理sorting，这工作正常，只是更新的位置。 请注意，它也是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++; }); } 

Answer 1

 ul > li 

只有直接的孩子。 所以，举个例子，你只能使用顶层列表元素：

 #parent > li 

注意：这在IE6上不受支持。

向后兼容的常见解决方法是做这样的事情：

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

这是更乏味的，因为你必须应用样式，然后closures它们（你可能不一定知道旧值是什么），但它是唯一的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++; }); }); } 

或类似的东西。