識別唯一數據屬性

Question

我創建一個jQuery插件，將基於數據排序屬性列表：

<ul class="reorder"> 
    <li data-rating="1" data-category="3">Rating 1 - Category 3</li> 
    <li data-rating="5" data-category="1">Rating 5 - Category 1</li> 
    <li data-rating="2" data-category="2">Rating 2 - Category 2</li> 
    <li data-rating="7" data-category="1">Rating 7 - Category 1</li> 
    <li data-rating="21" data-category="3">Rating 21 - Category 3</li> 
    <li data-rating="19" data-category="2">Rating 19 - Category 2</li> 
</ul> 

由於我不知道有多少數據將被添加的屬性，我希望能夠到通過列表循環和識別唯一數據屬性（這些屬性不是值）來創建一組鏈接：

<ul class="reorder-nav"> 
    <li><a href="#" data-sort="rating">Sort by rating</a></li> 
    <li><a href="#" data-sort="category">Sort by category</a></li> 
</ul> 

我的基本想法是遍歷各列表項和數據屬性創建一個數組，然後過濾該數組以獲取唯一屬性。

我可以用.data()創建一個包含所有數據屬性的數組，但除此之外，我有點卡住了，所以將不勝感激任何建議。

Answer 1

你可以做這樣的事情來提取數據-X屬性名稱：

var uniqueAttrs = {}; 
$('.reorder li').each(function(){ 
    $.each(this.attributes, function(_,a){ 
    if (a.name.indexOf('data-')===0) { 
     uniqueAttrs[a.name.slice(5)] = 1; 
    } 
    }); 
}); 

然後你就可以超過uniqueAttrs鍵遍歷：

for (var attr in uniqueAttrs) { 
    console.log(attr); // for example "sort" or "ranking" 
} 

如果你能負擔得起支持有限的一組瀏覽器，您可以使用dataset而不是attributes來簡化循環。