按字母顺序对多个列表进行排序

Question

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

我这里有 2 个列表，我想按字母顺序列出，但分为 2 个列表。我不想将它们组合成 1 个列表。

<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 演示：https://jsfiddle.net/1efm8aeb/

我相信我使用 .each() 是错误的，但是我不确定如何解决这个问题。谢谢！

Answer 1

这是更新后的 fiddle：https://jsfiddle.net/1efm8aeb/1/

基本上你忽略了一个事实，即一旦进入 .alphabet ul 的 .each select 或者，你不应该 select 使用 .alphabet li - 因为它 returns 所有 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);
});

按字母顺序对多个列表进行排序

Sort multiple lists alphabetically

javascript

jquery

sorting

alphabetical-sort