我从插件中获得了一些下拉菜单,这些菜单未按字母顺序或升/降序显示其内容。
检查器中的列表如下所示:
<ul class="options">
<li class = "opt">
<span><i></i></span>
<label> BAC </label>
</li>
<li class = "opt">
<span><i></i></span>
<label> ACD </label>
</li>
<li class = "opt">
<span><i></i></span>
<label> FBC </label>
</li>
</ul>
我想通过标签的内容对这些li进行排序。
列表的顺序是当前在电子表格中输入的内容,最后在顶部。
我已经尝试过在这里找到一些解决方案,包括这个Sort an html list with javascript
但是,我的下拉列表的顺序保持不变。
这是我第一次问一个问题,让我知道我是否有遗漏任何重要内容。谢谢。
答案 0 :(得分:0)
您可以对jQuery集合进行排序,然后将该集合附加到父项
$('ul.options').append(function() {
return $(this).children().sort(function(a, b) {
var aText = $(a).find('label').text().trim(),
bText = $(b).find('label').text().trim();
return aText.localeCompare(bText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="options">
<li class="opt">
<span><i></i></span>
<label> BAC </label>
</li>
<li class="opt">
<span><i></i></span>
<label> ACD </label>
</li>
<li class="opt">
<span><i></i></span>
<label> FBC </label>
</li>
</ul>