用于按字母顺序排列div的Javascript代码

我正在编辑一个网页，上面有一个医生姓名和图片的列表，并用div包装。我正在向该列表添加更多内容，我的客户现在希望所有姓名都按字母顺序排列。由于要手动完成这项工作（我知道我的客户将来也会增加更多的医生），我尝试编写一个脚本来为我完成这项工作。我将每个医生都包装在一个名为“字母顺序”的div中，并在每个医生的姓氏周围设置一个span id“lastName”

<div class="alphabetize large-6 columns sameheight-wrap">
    <div class="large-4 medium-4 columns sameheight  PadT20"> <img src="../imgs/dev/crna-staff/John-Doe.jpg" alt=" John Doe, CRNA" class="pictureBottomBorder"> </div>
    <div class="large-8 medium-8 columns contenttable sameheight  PadT20">
      <div class="border vmid text-center bgdblue PadB"> <span class="white medium"><strong>John<span id="lastName">Doe</span></strong><br>
        </span> <span class="white PadT5"> MSN, Thomas Jefferson University School of Nurse Anesthesia</span> </div>
    </div>
  </div>

JohnDoe

托马斯·杰斐逊大学护士麻醉学院MSN

我把下面的脚本放在那页上

<script>
var $divs = $("div.alphabetize");

$(function() {
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
   return $(a).find("#lastName").text() > $(b).find("#lastName").text();
});
$("#alpha").html(alphabeticallyOrderedDivs);
});
</script>

var$divs=$（“div.alphasorize”）；
$（函数（）{
var alphamocallyordereddivs=$divs.sort（函数（a，b）{
返回$（a）.find（“#lastName”）.text（）>$（b.find（#lastName”）.text（）；
});
$（“#alpha”）.html（按字母顺序排列）；
});

---

由于某些原因，脚本无法正常工作。医生出了问题，我还需要在代码中添加一个变量，用前3个字母对姓氏进行排序。有人能帮忙吗？Javascript不是我的强项。不确定我是否遗漏了什么。

下面是一个片段，它将向您展示如何轻松地对其进行排序。然而，主要问题如下：

return $(a).find("#lastName").text() > $(b).find("#lastName").text();

sort（）

函数要求返回三个值中的一个，0表示保持位置，-1表示将其移动到当前元素之前，1表示将其移动到当前元素之后。这意味着你能返回的都是在之后而不是之前，所以你的排序失败了

对于解决方案，我建议使用一个数据属性，不再需要呈现HTML跨距和样式（以后可能会隐藏），因此我的建议如下：

<div data-alphabetize="John Doe">John Does Content</div>

约瑟夫·阿尔弗雷德Beta
标记UnicodeAlpha
格雷厄姆伽马巨蟒
马修欧米茄

在我尝试回答之前，您是否反对将医生的姓名保留在javascript对象/数组中？事后处理页面不是很有效。ID在页面上必须是单数的。jdu-我愿意接受任何不涉及我手动订购60多名医生的解决方案。欢迎任何建议，谢谢。@Eddie看一下我的纯JS答案和建议，它应该会帮助你。@Something here-非常有效，谢谢！