如何按字母顺序对div的内容进行排序？答案

【问题标题】：How to sort contents of div alphabetically?如何按字母顺序对div的内容进行排序？
【发布时间】：2020-04-17 21:50:39
【问题描述】：

我有一个包含一长串项目的下拉菜单，我希望它按字母顺序显示。

<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 按字母顺序对我的内容进行排序？

【问题讨论】：

这能回答你的问题吗？ How may I sort a list alphabetically using jQuery?
如果没有必要，我宁愿不将我的内容更改为列表，因为我将不得不更改很多样式
您可以使用任何您喜欢的 HTML 结构。在您的情况下，该列表将是一系列 <a> 元素。这个想法是制作一个元素数组，sort them，然后在页面上替换它们。
感谢您指出这一点，工作完美

标签： javascript jquery alphabetical

【解决方案1】：

为避免仅移动内部 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);
}

指定父子元素（用于排序的元素——在本例中是a标签的innerText）：

let parent = $("#myDropdown");
let children = $("#myDropdown").children("a");

然后使用正确的参数调用函数：

sortMe(parent,children);

您无需更改 HTML 即可使用此方法。

【讨论】：