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

Question

我想使用 Jquery 按字母顺序对 多个 列表进行排序。我遇到过Alphabetize a list using JS or 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

这是更新后的小提琴：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);
});