Question

我正在编辑一个网页，其中包含一个包含在div中的医生姓名和图像列表。我在该列表中添加了更多内容，而我的客户现在想要按字母顺序排列所有名称。随着手动这样做（我知道我的客户也将在未来添加更多医生）我尝试编写一个脚本来为我做这项工作。我把每个医生都包裹在一个名为＆＃34; alphabetize，＆＃34;并设置跨度id为＆＃34; lastName＆＃34;围绕每个医生的姓氏。

<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>

我在该页面上放置了以下脚本;

<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>

由于某种原因，脚本无法正常运行。医生出了故障，我还需要在代码中添加一个变量，用前3个字母对姓氏进行排序。有人可以帮忙吗？ Javascript不是我的强项。不确定我是否错过了什么。

Answer 1

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

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

sort()函数要求返回三个值中的一个，0表示保持位置，-1表示在当前元素之前移动它，1表示在之后移动它。这意味着您可以返回的所有内容之后而之前不是，因此排序失败。

对于解决方案，我想建议使用数据属性，不再需要渲染的HTML跨度和样式（之后可能隐藏），所以这是我的建议：

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

我们可以将几个函数串在一起以获得正确的输出。我们需要prototype.slice.call将return-by-querySelector NodeList转换为数组，然后我们需要使用sort按字母顺序对其进行排序，最后我们可以使用forEach来完成数组并将节点插入正确的位置。

我正在使用vanilla JS--主要是为了展示如何在不加载jQuery的情况下完成简单的事情。当然，您也可以使用jQuery执行此操作。

// Turn querySelectorAll NodeList into an Array Array.prototype.slice.call(document.querySelectorAll('[data-alphabetize]')) // Sort the array by data-alphabetize attribute (reverse order) .sort(function(a, b){ return a.getAttribute('data-alphabetize') < b.getAttribute('data-alphabetize') ? 1 : -1; }) // Insert every node in order .forEach(function(v, i, a){ var parent = v.parentNode; parent.removeChild(v); parent.insertBefore(v, parent.childNodes[0]); });

<div> <div data-alphabetize="Beta">Joseph Alfred <strong>Beta</strong></div> <div data-alphabetize="Alpha">Mark Unicode <strong>Alpha</strong></div> <div data-alphabetize="Gamma">Graham <strong>Gamma</strong>-Python</div> <div data-alphabetize="Omega">Matthew <strong>Omega</strong></div> </div>

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

1 个答案: