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"
}

限られたブラウザー セットをサポートする余裕がある場合は、代わりにデータセットattributesを使用してループを単純化できます。

于 2013-09-30T11:35:48.457 に答える