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

您可以执行以下操作来提取data-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来简化循环。

识别唯一的数据属性

1 个答案: