HTML代码
<Select id="alphalist">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</Select>
<div id="a" class="lists" style="display">
<ul id="alist">
<li>Axe</li>
<li>Arc</li>
<li>Apple</li>
</ul>
</div>
<div id="b" class="lists" style="display:none">
<ul id="blist">
<li>Bat</li>
<li>Boat</li>
<li>Bee</li>
</ul>
</div>
<div id="c" class="lists" style="display:none">
<ul id="clist">
<li>Cat</li>
<li>Coat</li>
<li>Clock</li>
</ul>
</div>
脚本代码
$(function()
{
$('#alphalist').change(function(){
$('.lists').hide();
$('#' + $(this).val()).show();
});
});
在这里，我创建了 3 个列表和一个带有选项 A、B 和 C 的下拉菜单。默认情况下，选择了选项 A，并且只显示第一个列表。单击选项 B 的方式相同，选择选项 C 时仅显示第二个列表，仅显示第三个列表。现在我需要按字母顺序对每个列表进行排序并显示与所选选项相对应的排序列表。
排序的脚本代码为：
var mylist = $('#alist');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
上面的代码只对第一个列表进行排序。为了对第二个列表进行排序，我们需要通过将 $('#alist) 替换为 $('#blist) 再次编写上述代码。因此，如果我们有 20 多个列表，我们如何修改上面的代码以便我们可以对所有可用列表进行排序。如果所有列表之间的类名都是通用的，那么如何进行排序？请帮我。
只需遍历所有列表并对每个实例进行排序。这可以在页面加载时完成一次。
在这里，我使用html(function)循环并返回每个实例的排序子项
// sort lists on page load
$('.lists ul').html(function(){
return $(this).children().sort((a,b) => $(a).text().localeCompare($(b).text()));
});
// add the change listener for select<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a" class="lists">
<ul id="alist">
<li>Axe</li>
<li>Arc</li>
<li>Apple</li>
</ul>
</div>
<div id="b" class="lists" >
<ul id="blist">
<li>Bat</li>
<li>Boat</li>
<li>Bee</li>
</ul>
</div>
<div id="c" class="lists" >
<ul id="clist">
<li>Cat</li>
<li>Coat</li>
<li>Clock</li>
</ul>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句