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

概述参见英文答案 > How to sort out elements by their value in data- attribute using JS                                    1个我有以下标记：<ul> <li class='category-item' data-category-

参见英文答案 > 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));

总结

以上是内存溢出为你收集整理的javascript – 按数据属性排序HTML元素全部内容，希望文章能够帮你解决javascript – 按数据属性排序HTML元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1125132.html