javascript - 一意のデータ属性のリストを出力しようとしています (jQuery/Java)

Question

製品のグリッドがあり、それぞれにデータ属性 (data-category="" data-department="" data-color="" など) を割り当てて動的フィルタリング システムを構築しようとしています。一意のオプションのみを含むこれらの各データ属性の ul を出力する必要があります (したがって、それぞれに複数のインスタンスがあり、一部の製品には複数の (パイプで区切られた) 属性がある場合でも、「小、中、大」)

例：

<div data-category="shorts" data-size="large" data-color="blue"></div> 
<div data-category="shorts" data-size="small|medium|large" data-color="green"></div>
<div data-category="shorts" data-size="small" data-color="green|red"></div>
<div data-category="shirts" data-size="medium" data-color="blue"></div>
<div data-category="sunglasses" data-color="black"></div>

このデータでは、3 つのリストを取得しようとしています。

カテゴリー：ショーツ、シャツ、サングラス
サイズ：大、中、小
カラー：ブルー、グリーン、レッド

そして、それらをリスト要素に貼り付けます。

Answer 1

私は非常に基本的なAppprocahを試しましたが、理解するのに役立ちます

HTML

<div data-category="shorts" data-size="large" data-color="blue"></div> 
<div data-category="shorts" data-size="large" data-color="green"></div>
<div data-category="shorts" data-size="small" data-color="red"></div>
<div data-category="shirts" data-size="medium" data-color="blue"></div>
<div data-category="sunglasses" data-color="black"></div>

jQuery

$(function(){
     var output =[];
     var $cat =[]; 
     var $size = [];
     var $color =[];
    $('div').map(function (i){
        
        if( typeof $(this).data('category') == 'string') 
            $cat[i] = $(this).data('category')
        if( typeof $(this).data('size') == 'string') 
            $size[i] = $(this).data('size')
        if( typeof $(this).data('color') == 'string') 
        $color[i] = $(this).data('color');

    });
    output.push($.unique($cat),$.unique($size),$.unique($color));
    console.log(output); //or use alert(output)

})

DEMO

関数リファレンス

$.map

$.unique

$.data