按子内容对 HTML 个元素排序

Question

我在列表中有这些元素。我想按字母顺序对列表进行排序，但如果我要排序的文本位于子元素中，我该怎么做？

<div class="entry">
<button class="title btn btn-primary">Tale of Memories</button>
</div>

Answer 1

如果没有看到您的代码，就很难确切知道事情是如何工作的。这是一个通用的解决方案：

Select 列表中的所有元素（例如：使用querySelectorAll）。
将步骤 1 的结果转换为数组（例如：使用 this solution from andrewmu）
使用本机 sort() 方法对数组进行排序（提供您自己的函数以根据需要比较值）。
用数组的内容重写列表的内容。

这是一个演示。在其中，我们不直接根据每个项目中的文本对列表进行排序，而是根据每个项目中 span 中的文本对列表进行排序（因此，FA 项目排在最前面而不是最后）。在您的情况下，您将需要更改比较函数以获取您希望项目进行比较的元素：

// step 1: select the list items
var items = document.querySelectorAll("#mylist li");

// step 2: convert the node list into an array
var itemsarray = Array.prototype.slice.call(items, 0)

// step 3: sort the array using your own compare function
itemsarray.sort(function(a,b) {
 return a.querySelector("span").innerHTML > b.querySelector("span").innerHTML;
});

// step 4: empty the list, and insert the sorted items
var ml = document.getElementById("mylist");
ml.innerHTML = "";
for (var x = 0; x < itemsarray.length; x++) {
 ml.appendChild(itemsarray[x]);
}

<ul id="mylist">
  <li><span>E</span></li>
  <li><span>D</span></li>
  <li><span>B</span></li>
  <li>F<span>A</span></li>
  <li><span>C</span></li>
</ul>

按子内容对 HTML 个元素排序

Sort HTML emlements by child contents

html

sorting

text

children