Question

我正在排序看起来像这样的列表：

<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，完全超出我的深度，所以请放轻松。

Answer 1

对我来说这感觉有些笨拙，但我最终这样做的方法是向父母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>

然后我按类名抓取并分类了那些李。

$('.sortable').not(".sortable li").sort(function(a, b){
        return $('a', a).text() > $('a', b).text();
    }).appendTo(".current");

我仍然希望在不使用额外课程的情况下看到这样做的方法。如果有人知道如何做到这一点，我很乐意接受这个答案并接受这个更好的答案。

在li项目内对锚点进行排序，而不对嵌套列表进行排序

1 个答案: