按数据属性的顺序循环元素

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

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

1
2
3

谢谢。