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