按数据属性对HTML元素进行排序 [英] Sort HTML elements by data-attribute

问题描述

我有以下标记:

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

在 data-category-group 属性中，元素可以具有不同的组名.我希望能够对元素进行排序，以使带有牛仔裤组的元素在DOM中都紧随其后.

The elements can have different group names in the data-category-group attribute. I want to be able to sort the elements so that the elements with the group of jeans will all come after each other in the DOM.

我有一个主意，试图通过将HTML集合转换为数组然后对其进行排序来解决此问题.但是它似乎不能那样工作.

I had an idea to try to solve this by turning the HTML collection into an array and then sort them. But its does not seem to be able to work that way.

这是我的JavaScript:

Here is my 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;
}

这怎么实现?

在此处签出代码笔: https://codepen.io/fennefoss/pen/PBGrPZ

推荐答案

您应该使用 Array#sort ，只需将其传递给检查 data-category-group 的函数即可>属性:

You should use Array#sort, just pass it a function that checks the data-category-group property:

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

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

<ul id="demo">
  <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>


<button>Sort Elements</button>

这篇关于按数据属性对HTML元素进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！