javascript - 按数据属性顺序循环元素

Question

假设我有如下 HTML 元素

<span class="active" data-id="3"> Test 3 </span>
<span class="active" data-id="1"> Test 1 </span>
<span class="active" data-id="2"> Test 2 </span>


$(".active"].each(function(index,item){
var val = $(item).data("id");
console.log(val);
});

这将输出

3
1
2

无论如何我们可以根据 data 属性对这个循环进行排序，并通过 order 或 Data 属性或其他方式获取元素，以便输出

1
2
3

谢谢你。

标签： javascripthtmljquery

Answer 1

您需要使用“排序”高阶数组方法。排序 MDN 参考

const elements = Array.from(document.querySelectorAll('[data-id]'))

const sorted = elements.sort((firstEle, secondEle) => {
    const firstId = firstEle.dataset.id
    const secondId = secondEle.dataset.id
    
    return firstId > secondId
})


console.log(sorted)