javascript – 按数据属性排序HTML元素

发布时间：2020-12-14 23:13:33 所属栏目：资源来源：网络整理

导读：参见英文答案 How to sort out elements by their value in data- attribute using JS????????????????????????????????????1个我有以下标记：元素在data-category-group属性中可以具有不同的组名.我希望能够对元素进行排序,以便具有牛仔裤组的元素将在DOM

参见英文答案 > How to sort out elements by their value in data- attribute using JS????????????????????????????????????1个
我有以下标记：


元素在data-category-group属性中可以具有不同的组名.我希望能够对元素进行排序,以便具有牛仔裤组的元素将在DOM中相互追随.
我有一个想法,试图通过将HTML集合转换为数组然后对它们进行排序来解决这个问题.但它似乎无法以这种方式工作.
这是我的JavaScript：

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

怎么能实现这一目标？
在这里查看一个codepen：https://codepen.io/fennefoss/pen/PBGrPZ


最佳答案
您可以(并且应该)使用Array#sort,只需传递一个检查data-category-group属性的函数：

var categoryItems = document.querySelectorAll("[data-category-group]");
var categoryItemsArray = Array.from(categoryItems);

let sorted = categoryItemsArray.sort(sorter);

function sorter(a,b) {
    if(a.dataset.categoryGroup < b.dataset.categoryGroup) return -1;
    if(a.dataset.categoryGroup > b.dataset.categoryGroup) return 1;
}

document.querySelector("button").onclick = () => sorted.forEach(e => document.querySelector("#demo").appendChild(e));


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!