我有一个包含一长串项目的下拉菜单,我希望它以字母顺序显示。
<div id="myDropdown" class="dropdown-content">
<a href="#john" id="john-link" class="anchor">
<img src="images/logos/chelsea.png">John</a>
<a href="#paul" id="paul-link" class="anchor">
<img src="images/logos/tfc.png">Paul</a>
<a href="#umar" id="umar-link" class="anchor">
<img src="images/logos/realmadrid.png">Umar</a>
<a href="#mass" id="mass-link" class="anchor">
<img src="images/logos/inter.png">Mass</a>
<a href="#carlos" id="carlos-link" class="anchor">
<img src="images/logos/leverkusen.png">Carlos</a>
<a href="#colla" id="colla-link" class="anchor">
</div>
使用jQuery或javascript是否可以按字母顺序对我的内容进行排序?
为了避免仅移动内部html,您可以使用以下方法。
function sortMe(parent, children) {
children.sort((a, b) => {
if (a.innerText < b.innerText) {
return -1
}
if (a.innerText > b.innerText) {
return 1;
}
return 0;
});
children.detach().appendTo(parent);
}
指定父项和子项(用于排序的元素-在这种情况下,它是innerText
标签的a
):
let parent = $("#myDropdown");
let children = $("#myDropdown").children("a");
然后使用适当的参数调用函数:
sortMe(parent,children);
您无需为此方法而更改HTML。