Question

我想使用Jquery按字母顺序对多个列表进行排序。我遇到Alphabetize a list using JS or jQuery作为一个列表的解决方案。但是，当我在同一页面上有多个列表时，它不适用。

我这里有2个列表，我想按字母顺序列出，但分成2个列表。我不希望它们合并为一个列表。

<div class="alphabet">
<b>Fruit</b>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>    
<b>Vegetables</b>
<ul>
<li>Lettuce</li>
<li>Carrot</li>
<li>Cucumber</li>
</ul>
</div>

和这个

$(".alphabet ul").each(function(){
    $('.alphabet li').sort(function(a, b) {
        var aText = $(a).text(), bText = $(b).text();
        return aText < bText ? -1 : aText > bText ? 1 : 0;
    }).appendTo(this);
});

JSfiddle demo：https://jsfiddle.net/1efm8aeb/

我相信我正在使用.each（）错误，但我不确定如何解决这个问题。谢谢！

Answer 1

这里有更新的小提琴：https://jsfiddle.net/1efm8aeb/1/

基本上，您错过了这样一个事实：一旦进入.each .alphabet ul选择器，您就不应该使用.alphabet li选择列表项 - 因为它会返回所有6个项目只是3.

相反，您应该仅在正在迭代的ul的子项中搜索列表项。

这可以通过将代码修改为：

来完成

$(".alphabet ul").each(function(){
    $(this).find('li').sort(function(a, b) {
        var aText = $(a).text(), bText = $(b).text();
        return aText < bText ? -1 : aText > bText ? 1 : 0;
    }).appendTo(this);
});

Answer 2

尝试以下方法：

＆＃13;

$('.alphabet ul').each(function(i, ul){
  var list = $(ul).children('li').get();
  list.sort(function(a, b) {
    return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
  })
  $.each(list, function(idx, item) { 
    $(ul).append(item); 
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alphabet">
  <b>Fruit</b>
  <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
  </ul>    
  <b>Vegetables</b>
  <ul>
    <li>Lettuce</li>
    <li>Carrot</li>
    <li>Cucumber</li>
  </ul>
</div>

＆＃13;

按字母顺序排序多个列表

2 个答案: