0

我正在创建一个 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()但除此之外我有点卡住了，所以会很感激任何建议。

4

1 回答 1

2

您可以执行以下操作来提取 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.

于 2013-09-30T11:35:48.457 回答