2014-01-07 170 views
1

我排序,看起来像这样的列表:排序锚不排序嵌套列表

<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和完全失去了我在这里的深度,所以请去容易。

回答

1

对我来说这感觉有点不好意思,但我最终这样做的方式是向父母李的添加一个可排序的类。

<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"); 

我仍然喜欢看到一种方法来做到这一点,而不使用额外的类。如果有人知道如何做到这一点,我很乐意接受这个答案,并接受作为更好的答案。