我正在对如下所示的列表进行排序:
<ul class = "demoOne">
<li><a href="http://somelink.com">Some text</a></li>
<li><a href="http://somelink.com">Some more text</a>
<ul>
<li><a href="http://somelink.com">Some nested text</a></li>
<li><a href="http://somelink.com">Some more nested Text</a></li>
<li><a href="http://somelink.com">Even more nested Text</a></li>
</ul>
</li>
<li><a href="http://somelink.com">Still more text</a></li>
<li><a href="http://somelink.com">Even more text</a></li>
</ul>
我在another question上找到了这个解决方案:
$(function() {
$.fn.sortList = function() {
var mylist = $(this);
var listitems = $('li', mylist).get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : 1;
});
$.each(listitems, function(i, itm) {
mylist.append(itm);
});
}
$("ul#demoOne").sortList();
});
我遇到的问题是,这会获取所有嵌套链接并将它们插入到外部列表中。
所以我最终得到的是一个如下所示的列表:
- 更多嵌套文本
- 更多文字
- 更多嵌套文本
- 一些嵌套文本
- 更多文字
- 一些文字
- 还有更多文字
我该如何解决这个问题?
我刚刚学习 jQuery,完全超出了我的能力范围,所以请放轻松。
最佳答案
这对我来说有点 hacky,但我最终的做法是向父 li 添加一个可排序的类。
<ul class = "demoOne">
<li class="sortable"><a href="http://somelink.com">Some text</a></li>
<li class="sortable"><a href="http://somelink.com">Some more text</a>
<ul>
<li><a href="http://somelink.com">Some nested text</a></li>
<li><a href="http://somelink.com">Some more nested Text</a></li>
<li><a href="http://somelink.com">Even more nested Text</a></li>
</ul>
</li>
<li class="sortable"><a href="http://somelink.com">Still more text</a></li>
<li class="sortable"><a href="http://somelink.com">Even more text</a></li>
</ul>
然后我抓取并按类名对这些 li 进行排序。
$('.sortable').not(".sortable li").sort(function(a, b){
return $('a', a).text() > $('a', b).text();
}).appendTo(".current");
我仍然希望看到一种无需使用额外类即可完成此操作的方法。如果有人知道如何做到这一点,我很乐意记下这个答案并接受它作为更好的答案。
关于jquery - 对 li 项内的 anchor 进行排序,而不对嵌套列表进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20977010/