Javascript 按数据属性对HTML元素排序

我有以下标记：

<ul>
  <li class="category-item" data-category-group="jeans">Bottoms</li>
  <li class="category-item" data-category-group="tops">Shirt</li>
  <li class="category-item" data-category-group="jeans">Jeans</li>
  <li class="category-item" data-category-group="jeans">Shorts</li>
  <li class="category-item" data-category-group="tops">Hoodie</li>
  <li class="category-item" data-category-group="accesories">Sunglasses</li>
</ul>

如何做到这一点

---

在此处签出一个代码笔：

您可以使用数组上的

排序方法执行此操作，然后将元素追加回
ul


let ul=document.querySelector（“ul”）；
设li=ul.queryselectoral（“li”）；
让sorted=Array.from（li）.sort（（a，b）=>{
返回（b.dataset.categoryGroup=='jeans'）-（a.dataset.categoryGroup=='jeans'）
})
ul.innerHTML=“”；
sorted.forEach（e=>ul.appendChild（e））

底部
衬衫
jeans
短裤
连帽衫
太阳镜
您应该使用
数组#排序
，只需向其传递一个检查
数据类别组
属性的函数：


var categoryItems=document.queryselectoral（“[数据类别组]”）；
var categoryItemsArray=Array.from（categoryItems）；
let sorted=categoryItemsArray.sort（分拣机）；
功能分拣机（a、b）{
if（a.dataset.categoryGroupb.dataset.categoryGroup）返回1；
返回0；
}
document.querySelector（“按钮”）.onclick=（）=>sorted.forEach（e=>document.querySelector（“demo”）.appendChild（e））

底部
衬衫
jeans
短裤
连帽衫
太阳镜

对元素进行排序
在这里：
var categoryItems = document.querySelectorAll("[data-category-group]");
var categoryItemsArray = Array.from(categoryItems)

document.getElementById("demo").innerHTML = categoryItemsArray;

function myFunction() {
    categoryItemsArray.sort();
    document.getElementById("demo").innerHTML = categoryItemsArray;
}