Question

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

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

Answer 1

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

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

这是一个演示。在其中，我们不是根据每个项目中的文本对列表进行排序，而是根据每个项目中span的文本进行排序（因此FA项目先行而不是最后一项）。在您的情况下，您需要更改比较功能以获得您希望比较项目的任何元素：

＆＃13;

// 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]);
}

＆＃13;

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

＆＃13;

按子内容对HTML元素排序

1 个答案: